Ap3twe
1 month ago

Alpine Extract value from select[option]

Posted 1 month ago by Ap3twe

Trying to use the x-model.number to get values from select option to calculate the values. Using input text works. How do I translate it on select option?

 <div x-data="{first: 0, second: 0}">
        <input type="text" x-model.number="first"> + <input type="text" x-model.number="second"> =
        <output x-text="first + second"></output>
   </div>

// Select option example 1 not working

<div x-data="{chromeNow: 0, chromeNatural: 0 }">

       <select>
           <option value="7499.00" x.model.number="chromeNow">1</option>
           <option value="6900.00" x.model.number="chromeNow">2</option>
      </select>
      <select >
         <option value="6900.00" x.model.number="chromeNatural">1</option>
         <option value="1200.00"  x.model.number="chromeNatural">2</option>
      </select>

   <h3 x-text="chromeNow + chromeNatural"> </h3>

</div>

// Select option example 2 not working

<div x-data="{chromeNow: 0, chromeNatural: 0 }">

       <select x.model.number="chromeNow">
           <option value="7499.00">1</option>
           <option value="12700.00">2</option>
      </select>
      <select x.model.number="chromeNatural" >
         <option value="6900.00" >1</option>
         <option value="1200.00">2</option>
      </select>

   <h3 x-text="chromeNow + chromeNatural"> </h3>

</div>

Please sign in or create an account to participate in this conversation.