JQuery。 1つのドロップダウンオプションが選択されている場合は、他のドロップダウンオプションが自動的に選択されます

Question

これは私のシナリオです。

以下はユーザーに表示され、ユーザーが選択できます。

<select class="user-select"> 
    <option value="" selected>(select)</option> 
    <option value="1,000">user-select One</option> 
    <option value="2,000">user-select Two</option> 
    . 
    . 
</select> 

次は非表示の選択です。ユーザーが上記の選択ボックスから選択すると、上記の値に従って自動的に以下が選択されます。オプション名は上記と同じです。

<select class="auto-select"> 
    <option value="" selected>(select)</option> 
    <option value="100,000">user-select One</option> 
    <option value="200,000">user-select Two</option> 
    . 
    . 
</select> 

次のdivでは、自動選択された値の値を表示します。

<div class="result">Display auto select value</div> 

助けてください！

Answer 1

を使用することができますjavascriptをしたい場合あなたが求めている答えは少し矛盾しています。

だから私はあなたが同じ値を持つ2番目のオプションを選択したい場合は代わりに同じ名前の2つの可能なシナリオ

シナリオ1 に異なる答えを持って

$(function(){ 
    $('select.user-select').change(function(){ 
     var userSelect = $(this).find(":selected").val(); 
     $('select.auto-select').val(userSelect); 
    $('.result').text($(".auto-select option:selected").text()); 
    }); 
}) 

シナリオ2 あなたがしたい場合は同じ値の代わりに同じ名前の2番目のオプションを選択してください

$(function(){ 
    $('select.user-select').change(function(){ 
     var userSelect = $(this).find(":selected").text(); 
     var secondVal = $('.auto-select option').filter(function() { return $(this).html() == userSelect; }).val(); 
     $('select.auto-select').val(secondVal); 
    $('.result').text($(".auto-select option:selected").text()); 
    }); 
}); 

私が理解したものからuldがシナリオ2を探している

Answer 2

だけjQueryを使って

$(document).ready(function() { 
 
$('.user-select').change(function() { 
 
//var val = $('.user-select').find(':selected').attr('data-id'); 
 
var val = $('.user-select').prop('selectedIndex'); 
 
$(".auto-select").prop('selectedIndex', val); 
 
$('.result').html($(".auto-select").val()); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<select class="user-select"> 
 
    <option value="" selected>(select)</option> 
 
    <option value="1,000">user-select One</option> 
 
    <option value="2,000">user-select Two</option> 
 
    <option value="3,000">user-select Three</option> 
 
    <option value="4,000">user-select Four</option> 
 
</select> 
 
<select class="auto-select"> 
 
    <option value="" selected>(select)</option> 
 
    <option value="100,000">user-select One</option> 
 
    <option value="200,000">user-select Two</option> 
 
<option value="300,000">user-select Three</option> 
 
    <option value="400,000">user-select Four</option> 
 
</select> 
 

 
<div class="result">Display auto select value</div>

あなたは私が見るの例ではオプションからこの

window.onload=function() { 
 
    document.getElementById("a").onchange=function() { 
 
    document.getElementById("b").selectedIndex=this.options[this.selectedIndex].getAttribute("data-id"); 
 
    document.getElementById('result').innerHTML = document.getElementById('b').value; 
 
    } 
 
    document.getElementById("a").onchange(); // trigger when loading 
 
}

<select id="a" class="user-select"> 
 
    <option value="" selected data-id="0">(select)</option> 
 
    <option value="1,000" data-id="1">user-select One</option> 
 
    <option value="2,000" data-id="2">user-select Two</option> 
 
    <option value="3,000" data-id="3">user-select Three</option> 
 
    <option value="4,000" data-id="4">user-select Four</option> 
 
</select> 
 
<select id="b" class="auto-select"> 
 
    <option value="" selected>(select)</option> 
 
    <option value="100,000">user-select One</option> 
 
    <option value="200,000">user-select Two</option> 
 
<option value="300,000">user-select Three</option> 
 
    <option value="400,000">user-select Four</option> 
 
</select> 
 

 
<div id="result" class="result">Display auto select value</div>