javascript - Copy dropdown menu's data to text box on select? - Stack Overflow

admin管理员组

文章数量:1333201

Let's say you have this dropdown menu:

<select>
   <option value="10">Apple</option>
   <option value="20">Orange</option>
</select>

<input type="name" />
<input type="price" />

If user selects "Orange" from the dropdown menu, the textboxes' values should be:

<input type="name" value="Orange" />
<input type="price" value="20" />

or if it was "Apple", then textboxes' values should be Apple and 10.

Is this possible with Jquery or Jquery Mobile, if yes how?

Let's say you have this dropdown menu:

<select>
   <option value="10">Apple</option>
   <option value="20">Orange</option>
</select>

<input type="name" />
<input type="price" />

If user selects "Orange" from the dropdown menu, the textboxes' values should be:

<input type="name" value="Orange" />
<input type="price" value="20" />

or if it was "Apple", then textboxes' values should be Apple and 10.

Is this possible with Jquery or Jquery Mobile, if yes how?

• javascript
• jquery
• html
• jquery-mobile

Share Improve this question Follow asked Apr 19, 2013 at 19:25 IMBIMB 15.9k2323 gold badges8787 silver badges149149 bronze badges 4

• 3 Yes, yes it is possible. – j08691 Commented Apr 19, 2013 at 19:26
• 1 @IMB what have you tried? ;-) – Dom Commented Apr 19, 2013 at 19:28
• Well all your answers work, now it will tough to select best answer :-) Thanks! – IMB Commented Apr 19, 2013 at 19:44
• @IMB choose PSCoder's, that's the best xD – Hanlet Escaño Commented Apr 19, 2013 at 19:52

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

http://jsfiddle/f23uP/

$('select').change(function(){

$('input[type=name]').val($('option:selected',this).text());
    $('input[type=price]').val($(this).val());
});

Yes

$("select").change(function() {
    var price = this.value;
    var selText = $("select option:selected").text();

    $("input[type='name']").val(selText);
    $("input[type='price']").val(price);
});

Something like that should work

jQuery:

$("#s").on("change",function(){
    $("#text").val($(this).children().filter("option:selected").text());
    $("#price").val($(this).val());
});

Markup:

<select id="s">
   <option value="10">Apple</option>
   <option value="20">Orange</option>
</select>

<input type="text" id="text" />
<input type="text" id="price" />

jsFiddle: http://jsfiddle/hescano/NnsDt/

I think you are a little confused with types of inputs. This MDN link will help.

If I understand you correctly, you want to take the value and the label from the select and store them in a corresponding textbox. Here is my solution:

HTML:

<select id="fruit">
   <option></option>
   <option value="10">Apple</option>
   <option value="20">Orange</option>
</select>

<input type="text" id="name" />
<input type="text" id="price" />

jQuery:

$("#fruit").change(function() {
     var name = $(this).find(":selected").text();
     var price =  $(this).val();
     $("#name").val(name);
     $("#price").val(price);
});

Note that this jQuery only binds the fruit select for the onchange instead of binding all select

本文标签： javascriptCopy dropdown menu39s data to text box on selectStack Overflow