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

Question

我想做一个动态选择。当我在一个选择中选择某个数据时，另一个会改变他对数据的看法。没有什么是你们没看到的，对吧?

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

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);
});

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

javascript获取"data-example"，并在另一个中显示只选择相同"data-example"的值。我不知道怎么做的是:

1 -当你测试我的代码时，你可以看到，如果你在第一次选择中选择一个数据，第二次总是显示正确的内容，但最后一次而不是第一次…我怎么能改变第二个选择开始显示值从上到下?

2 -有一种方法来使用这个脚本，使第二个选择显示值像"onLoad"或什么?这些值只是在那一刻被立即放置，当前页面不会处理它的变化。-例如:如果我在HTML上加上selected="selected"

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

第二个select没有加载我想要的值

谢谢,伙计们!我会继续努力的!

Answer 1

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

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

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

然后，对于第二个问题(我仍在研究)，我接近....将代码"trigger('change')";在同一行的末尾，将加载HTML并动态更改值。

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

这工作!但不能使用默认值null。因为我正在使用"change"事件

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>

我希望第二次选择显示什么如果第一次选择数据没有被选中…当页面加载时。但是我会解决的。

好. .我将把这个答案标记为ok。

如果有人想改变什么，这是小提琴…=)

感谢所有帮助我的人