JQuery根据下拉菜单中的选择更改值 [英] JQuery to change value based on selection in a drop down menu

问题描述

使用JQuery我试图创建一个下拉菜单，然后根据人们在菜单中选择的内容在搜索输入元素上更改特定值。

到目前为止，我已经想出了如何定位我需要改变的价值。我还得到了尽可能多的信息，以便如果有人从菜单中进行任意选择，它会将搜索输入值更改为一个特定值：

 < div> 
< form action =setColormethod =post> 
< fieldset> 
< label for =color>选择一种颜色< / label> 
< select name =colorid =color> 
< option>蓝色< /选项> 
< option selected =selected>红色< / option> 
< option>黄色< /选项> 
< / select> 
< / fieldset> 
< / form> 
< / div> 
 
 
< script> 
 $ b $（function（）{
 $（'select [name =color]'）。change（function（）{
 $（'input [name = ancestorId]'）。val（9999）; 
}）; 
}）; 
 
< / script> 
  

现在我需要的是根据菜单选项设置值的东西， ：

 蓝色= 9999 
红色= 8888 
黄色= 7777 
  

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

解决方案

您应该将值赋值放置在选项元素中， p>

 < select name =colorid =color> 
< option value =9999>蓝色< /选项> 
< option value =8888selected =selected> Red< / option> 
< option value =7777>黄色< / option> 
< / select> 
  

脚本几乎保持不变，除了我使用了元素ID而不是他们的名字（这里假设你的祖先元素有这样一个ID）：

$ $ $ $ $ $ $（function（）{
$（ '）;变化（函数（）{
$（'＃ancestor'）.val（$（this）.val（））;
}）。change（）; //触发器事件
}）;

请注意，链接的 .change（）调用将触发刚刚分配的更改事件，以便在页面加载时将预选项目的值填充到文本字段中。

在操作中查看它：

  $（function（）{$（'＃color'）。change（function（）{$（'＃ancestor'）。 val（$（this）.val（））;}）。change（）; //触发事件}）;  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js><<< ; / script>< select name =colorid =color> < option value =9999>蓝色< / option> < option value =8888selected =selected> Red< / option> < option value =7777> Yellow< / option>< / select>< input id =ancestortype =text/> 

Using JQuery I'm trying to create a drop-down menu and then change a certain value on a search input element based on what people select in the menu.

So far I've figured out how to target the value I need to change. I've also gotten as far as having it so that if someone makes any selection from the menu, it changes the search input value to one specific value:

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

What I need now is something that sets the value according to the menu selection, matched up something like this:

Blue = 9999
Red =  8888
Yellow = 7777 

I'm still looking at examples and will keep trying, but kind of stuck. Any advice appreciated.

解决方案

You should put the value assignment in the option elements, as they were designed for just that:

<select name="color" id="color">
    <option value="9999">Blue</option>
    <option value="8888" selected="selected">Red</option>
    <option value="7777">Yellow</option>
</select>

And the script nearly stays the same, except I've used the elements IDs instead of their names in the selectors (assuming here your ancestor element has such an ID):

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

Note that the chained .change() call will trigger the change event that was just assigned, so that the pre-selected item's value will be populated into the text field when the page loads.

See it in action:

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

这篇关于JQuery根据下拉菜单中的选择更改值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！