JQuery。如果选择了一个下拉选项，则自动选择其他下拉选项

Question

这是我的场景。

以下显示给用户，他们可以select一个。

<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。如果用户 select 从上面的 select 框，下面是根据上面的值自动 selected。选项名称同上

<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 中，我想显示来自自动 selected 值的值。

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

请帮忙！

Answer 1

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

如果你想要javascript你可以使用这个

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>

Answer 2

从我看到的例子中的选项和你问的答案有点矛盾

所以我对 2 种可能的情况有不同的答案

场景一如果你想 select 第二个选项具有相同的值而不是相同的名称

$(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 如果你想 select 第二个选项具有相同的名称而不是相同的值

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

根据我的理解，你应该寻找场景 2

JQuery。如果选择了一个下拉选项，则自动选择其他下拉选项

JQuery. If one dropdown option selected, then other dropdown option selected automatically

jquery

dropdown

option