JavaScript - <select>のデータを別のものから変更する<select>

Question

私は動的選択をしようとしています。 ある選択で特定のデータを選択すると、もう一方の選択はデータの表示を変更します。 あなたが既に見ていたことはありませんでしたか？

しかし、私はまだ学んで、javascriptのコードを持つ新たなんだ... iは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>

のようなものを試してみました同じ "データ例"の値だけを選択してください。 方法は分かりません：

1 - コードをテストすると、最初の選択でデータを選択すると、2番目の選択肢は常に正しい内容を表示しますが、代わりに最後の部分が表示されますどのように私は上から下にショーの値を開始するために2番目の選択を変更することができますか？

2 - このスクリプトを使用して、「onLoad」などの2番目の選択表示値を作成する方法がありますか？値は単に即座にその瞬間に入れられ、現在のページは変更されたキューを処理しません。 - 例えば： 私は=第2の選択は、私が欲しいの値をロードしない

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

を「選択」を選択したHTMLに置く場合。

ありがとうございます！私は試し続けます！

Answer 1

私は何とかしてみましたが、問題の一部を解決しました。最初の質問については

、私はコードを追加しました：

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

次に、（私はまだに取り組んでいることを）2番目の質問のために、私が近づいています....置きますcode "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>

は、私が欲しいそのページがロードされたときに第1の選択データが..選ばれていない場合、第2の選択を示して何も。しかし、私はこれを解決するでしょう。

まあ私はこれをok回答とマークします。誰もが何かを変更する場合はここで

は私を助けしようとしたすべての人のための

おかげで）= ... fiddleです。