查询。如果选择了一个下拉选项，则自动选择另一个下拉选项

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

从我看到的示例中的选项和您所要求的答案有点矛盾。

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

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

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

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>

如果你想要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>