使用JQM根据先前选择的值更改选择选项 [英] Changing select options based on a previous select's value with JQM

问题描述

我想根据我在第一个选择下拉列表中选择的内容更改第二个选择下拉列表中的选项。我已经用普通的老JS完成了这个工作，但是我想要一个更好的方式在JQM中完成它。

我有一个包含所有选项的对象，如下所示：

  var options = {
 blah1：[A，B，C]，
 blah2：[D，E，F]，
 blah3：[G，G，I] 
}; 
  

我有这些选择输入：

 < select value =firstSelect> 
< option value =blah1> Blah1< / option> 
< option value =blah2> Blah2< / option> 
< option value =blah3> Blah3< / option> 
< / select> 
 
< select value =secondSelect> 
< / select> 
  

以下是我目前在main.JS中的内容：

  $（'＃firstSelect'）。change（function（）{
 var x = $（'＃secondSelect'）。val（）$ b $ （选项[x]）{
 $（'＃secondSelect'）。append（'< option value =''+ options [x] [index] +'>'+ options [ x] [index] +'< / option>'）
}; 
}）; 
  

在第一个选择下拉菜单中选择blah1时，第二个选择下拉菜单将填充选项.blah1值。然后与blah2和blah3一样。这就是我想要工作的想法。

我没有使用JQM，但有一个类似的版本，但现在我无法弄清楚。
任何人都可以帮助这个工作吗？

预先感谢您。

编辑：出来！我需要在结束整个块之前添加 $（'＃secondSelect'）。selectmenu（'refresh'，true）; 它正在工作，我只需要刷新第二个选择下拉列表以更新它。希望这可以帮助别人。

顺便说一下，我无法回答自己的问题，所以我只是添加了这个编辑。任何人都可以自由地回答。

解决方案

好吧，那是你代码中的一些错误...

1. 首先，您的select元素没有ID属性，您可以将ids插入名为value的属性中
   
2. 其次，在你的javascript函数中，你试图以错误的方式从select1中选择值...正确的形式是 $（'＃firstSelect：selected'）。val（） code>


3. 最后一个，当您使用 .append（）方法时，您不会清除旧的html，所以，在使用 .append（）方法之前，您必须使用 .html（） ...

以下是 jsfiddle 用一个功能性的例子。


I'm wanting to change the options in my second select drop down based off of what I have selected in my first select drop down. I've done this with regular old JS, but I wanted a better way of doing it in JQM.

I have an object with all the options, like this:

var options = {
    blah1: ["A", "B", "C"],
    blah2: ["D", "E", "F"],
    blah3: ["G", "G", "I"]
};

I have these select inputs:

<select value="firstSelect">
    <option value="blah1">Blah1</option>
    <option value="blah2">Blah2</option>
    <option value="blah3">Blah3</option>
</select>

<select value="secondSelect">
</select>

Here is what I currently have in my main.JS:

$('#firstSelect').change(function() {
    var x= $('#secondSelect').val()
    for(index in options[x]) {
        $('#secondSelect').append('<option value="' + options[x][index] + '">' + options[x][index] + '</option>')
    };
});

When blah1 is selected in the first select drop down, the second select drop down would be populated with options.blah1 values. Then the same with blah2 and blah3. That is the idea I'm trying to get working.

I had a similar version of this working without using JQM, but now I can't figure it out. Can anyone help get this working?

Thank you in advance.

EDIT: I figured it out! I needed to add $('#secondSelect').selectmenu('refresh', true); at the end, before closing out the whole block. It was working, I just needed to refresh the second select drop down to update it. Hope this helps someone.

By the way, I can't answer my own question, so I just added this edit. Anyone can feel free to answer.

解决方案

Ok, that are some errors in you code...

1. First, your select elements don't have ID attribute, you insert the "ids" into a attribute named value
2. Second, in your javascript function, you're trying to get selected value from select1 in a wrong way... the correct form would be $('#firstSelect :selected').val()
3. Last one, when you use .append() method you don't clean the old html, so, you must use .html("") before use the .append() method...

Here is a jsfiddle with a functional example.

这篇关于使用JQM根据先前选择的值更改选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！