Question

我试图进行动态选择。当我在一个选择中选择某个数据时，另一个改变了他对数据的看法。没有你们都没有看到过的，对吧？

但我是javascript代码的新手，还在学习.. 我试过像https://jsfiddle.net/victorviegas/7yLjmfqz/

这样的东西

＆＃13;

var selectchild = $('select[name="selectChild"] option');
$('select[name="selectFather"]').on('change', function() {
  var selectfather = this.value;
  var newSelect = selectchild.filter(function() {
    return $(this).data('example') == selectfather;
  });
  $('select[name="selectChild"]').html(newSelect);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectFather">
  <option value=""></option>
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>
<br/>
<br/>
<br/>
<select name="selectChild">
  <option data-example="a" value="a">a</option>
  <option data-example="a" value="aa">aa</option>
  <option data-example="a" value="aaa">aaa</option>
  <option data-example="b" value="b">b</option>
  <option data-example="b" value="bb">bb</option>
  <option data-example="b" value="bbb">bbb</option>
  <option data-example="c" value="c">c</option>
  <option data-example="c" value="cc">cc</option>
  <option data-example="c" value="ccc">ccc</option>
</select>

＆＃13;

javascript获取＆＃34;数据示例＆＃34;并在另一个中显示仅选择相同＆＃34;数据示例＆＃34;的值。我不知道该怎么做：

1 - 当你测试我的代码时，你可以看到，如果你在第一个选择中选择一个数据，第二个总是显示正确的内容，但是最后一个而不是第一个...如何将第二个选择更改为从上到下开始显示值？

2 - 有一种方法可以使用这个脚本来制作第二个选择节目值，例如＆＃34; onLoad＆＃34;或者其他的东西？这些值只是立刻放在那个时刻，当前页面不会处理它已改变的que。 - 例如：如果我选择HTML =＆＃34;选择＆＃34;

<select name="selectFather">
  <option value="a" selected="selected">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>

第二个选择不加载我想要的值。

谢谢，伙计们！我一直在努力！

Answer 1

我尝试了一些事情，然后我解决了部分问题。

对于第一个问题，我添加了代码：

$('select[name="selectChild"]').html(newSelect).prop("selectedIndex", 0);

然后，对于第二个问题（我还在继续），我正在接近......将代码“触发（'更改'）;”放在同一行的末尾，将加载html和改变de值dinamically。

$('select[name="selectChild"]').html(newSelect).prop("selectedIndex", 0).trigger('change');

这个有效！但不是默认值为null。因为我正在使用“改变”事件。

var selectson = $('select[name="selectSon"] option');
$('select[name="selectFather"]').on('change', function() {
  var selectfather = this.value;
  var newSelect = selectson.filter(function() {
    return $(this).data('example') == selectfather;
  });
  $('select[name="selectSon"]').html(newSelect).prop("selectedIndex", 0).trigger('change'); ;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectFather">
  <option value=""></option>
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>
<br/>
<br/>
<br/>
<select name="selectSon">
  <option data-example="a" value="a">a</option>
  <option data-example="a" value="aa">aa</option>
  <option data-example="a" value="aaa">aaa</option>
  <option data-example="b" value="b">b</option>
  <option data-example="b" value="bb">bb</option>
  <option data-example="b" value="bbb">bbb</option>
  <option data-example="c" value="c">c</option>
  <option data-example="c" value="cc">cc</option>
  <option data-example="c" value="ccc">ccc</option>
</select>

我希望第二个选择在没有选择第一个选择数据时显示任何内容..当页面加载时。但我会解决这个问题。

嗯..我会将此标记为正确答案。

如果有人改变任何事情，那么fiddle就是...... =）

感谢所有尝试帮助我的人。

JavaScript - 从另一个</select>更改<select>数据

1 个答案: