将下拉菜单的数据复制到选中的文本框?

时间:2013-04-19 19:25:10

标签: javascript jquery html jquery-mobile

假设你有这个下拉菜单:

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

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

如果用户从下拉菜单中选择“橙色”,则文本框的值应为:

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

或者如果是“Apple”,则文本框的值应为Apple10

这可能与Jquery或Jquery Mobile有关,如果是的话怎么样?

4 个答案:

答案 0 :(得分:4)

http://jsfiddle.net/f23uP/

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

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

答案 1 :(得分:2)

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

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

这样的事情应该有效

答案 2 :(得分:2)

<强>的jQuery

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

<强>标记

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

答案 3 :(得分:2)

我认为你对输入的类型有点困惑。这个MDN link会有所帮助。

如果我理解正确,您需要从选择中获取值和标签,并将它们存储在相应的文本框中。这是我的解决方案:

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);
});

请注意,此jQuery仅绑定onchange的水果select,而不是绑定所有select