Ap3twe's avatar

Alpine Extract value from select[option]

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>
0 likes
7 replies
bugsysha's avatar

And what about the second example when you remove .number from x-model?

Ap3twe's avatar

I tried it no action. does the x-model only listen to input text?

Based on the docs, X-model Adds "two-way data binding" to an element. Keeps input element in sync with component data."

Ap3twe's avatar
Ap3twe
OP
5 years ago
Best Answer
Level 5

I fixed it. It was x-model not x.model

   <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>

bugsysha's avatar

LOL, didn't notice it since the first time you wrote x-model was correctly written.

<input type="text" x-model.number="first"> + <input type="text" x-model.number="second">
waltergrimmvie's avatar

Hi @bugsysha

Could you help me with this problem?

<div class="w-full flex" x-data="{category:0}">
        <div class="relative w-auto" >
                 <span x-text="category"></span>
        </div>
        <select id="category" class="cursor-pointer" x-ref="category" x-model="category">
             <option value=0 selected="selected">One</option>
             <option value=1 selected="selected">Two</option>
             <option value=2 selected="selected">Three</option>
       </select>
</div>

I want to display the text (Not the value) on the span. Now, the span displays 0, 1, 2 but I want to display One, Two, Three based on the selection. How can I do this?

Ap3twe's avatar

Sorry, You need to open another thread next time. This is a closed thread. Try this

 <div class="w-full flex" x-data="{category:0}">
        <div class="relative w-auto" >
                 <span x-text="category"></span>
        </div>
        <select id="category" x-ref="category"   x-model="category" class="border-4 border-light-blue-500 border-opacity-100">
            <option selected> </option>
             <option value="One">One</option>
             <option value="Two">Two</option>
             <option value="Three" >Three</option>
       </select>
</div>

Please or to participate in this conversation.