Jquery表单 - 将隐藏值更改为选项ID

时间:2012-04-28 04:38:34

标签: jquery forms

啊,我正在努力解决这个问题。 Jquery的新手......你可能很快就能告诉......

尝试使用选项ID来设置隐藏输入的值,但数小时和数百个谷歌搜索没有解决方案。

我已经想出如何使用选择器ID拉出所选选项的值,但我想获取选项的ID,因此我可以将该唯一ID设置为隐藏输入的值。

<form>
<select name="amount" id="item_number1">
    <option value="1" id="11">one</option>
    <option value="2" id="22">two</option>
    <option value="3" id="33">three</option>
</select>
<input type="button" value="Set Value" onclick="$('#item_number2').val( $('#item_number1').val() )"/>
<input id="item_number2" type="text" />

Ps:隐藏的输入不是这种形式,在这种形式中我使用文本输入字段,所以我可以看到我的方法是否正常工作。

2 个答案:

答案 0 :(得分:1)

您可以像这样获取所选选项的ID:

<script>
$(function(){
  var sItem = document.getElementById("item_number1");
  $("#transfer").on("click", function(){
    $("#item_number2").val( sItem[sItem.selectedIndex].id );
  });
});
</script>
<input type="button" id="transfer" value="Transfer ID" />
<select name="amount" id="item_number1">
  <option value="1" id="11">one</option>
  <option value="2" id="22">two</option>
  <option value="3" id="33">three</option>
</select>
<input type="text" id="item_number2" />

请注意,您不应该使用数字来启动您的ID值 - 这可能会给您带来问题。最好遵守这样的规则。

演示:http://jsbin.com/ucujex/edit#javascript,html,live

答案 1 :(得分:1)

您可以将按钮的onclick更新为:

$("#item_number2").val($("#item_number1 option:selected").attr("id"));

一个很好的改进是当你更改select中的选项时自动更改(你不需要按钮)。

$("#item_number1").change(function() {
    $("#item_number2").val($("option:selected", this).attr("id"));
});