Question

使用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

我仍然在看例子，并会继续尝试，但有点卡住了。任何建议表示赞赏。

Answer 1

您应该将值赋值放在选项元素中，因为它们是为此而设计的：

<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()调用将触发刚刚分配的更改事件，以便在页面加载时将预先选择的项的值填充到文本字段中。

看到它的实际效果：

＆＃13;

$(function() { 
    $('#color').change(function() {
         $('#ancestor').val($(this).val());
    }).change(); // Trigger the event
});

＆＃13;

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

＆＃13;

JQuery根据下拉菜单中的选择更改值

1 个答案: