[英]JQuery to change value based on selection in a drop down menu
我正在尝试使用JQuery创建一个下拉菜单,然后根据人们在菜单中选择的内容来更改搜索输入元素上的某个值。
到目前为止,我已经弄清楚了如何确定需要更改的价值的目标。 我还尽力做到这一点,以便如果有人从菜单中进行任何选择,它将搜索输入值更改为一个特定值:
<div>
<form action="setColor" method="post">
<fieldset>
<label for="color">Select A Color</label>
<select name="color" id="color">
<option>Blue</option>
<option selected="selected">Red</option>
<option>Yellow</option>
</select>
</fieldset>
</form>
</div>
<script>
$(function() {
$('select[name="color"]').change(function() {
$('input[name="ancestorId"]').val("9999");
});
});
</script>
我现在需要的是根据菜单选择来设置值的东西,类似于以下内容:
Blue = 9999
Red = 8888
Yellow = 7777
我仍在查看示例,并且会继续尝试,但有些困难。 任何建议表示赞赏。
您应该将值赋值放在option元素中,因为它们仅用于以下目的:
<select name="color" id="color">
<option value="9999">Blue</option>
<option value="8888" selected="selected">Red</option>
<option value="7777">Yellow</option>
</select>
脚本几乎保持不变,只不过我在选择器中使用了元素ID而不是它们的名称(假设在这里您的祖先元素具有这样的ID):
$(function() {
$('#color').change(function() {
$('#ancestor').val($(this).val());
}).change(); // Trigger the event
});
请注意,链接的.change()
调用将触发刚刚分配的更改事件,以便在页面加载时将预先选择的项目的值填充到文本字段中。
实际观看:
$(function() { $('#color').change(function() { $('#ancestor').val($(this).val()); }).change(); // Trigger the event });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select name="color" id="color"> <option value="9999">Blue</option> <option value="8888" selected="selected">Red</option> <option value="7777">Yellow</option> </select> <input id="ancestor" type="text" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.