1

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?

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

4 Answers 4

4

http://jsfiddle.net/f23uP/

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

$('input[type=name]').val($('option:selected',this).text());
    $('input[type=price]').val($(this).val());
});
1
  • 1
    Thank you!! Its just one of those days for your probably :)
    – PSL
    Apr 19, 2013 at 19:53
2

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

2

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.net/hescano/NnsDt/

2

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

1
  • Careful, the input's that need appending to don't have ID's.
    – tymeJV
    Apr 19, 2013 at 19:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.