Question

我正在尝试使用相同的选项值（相同文本）构建2个单独的下拉选择器

选择器1 选择器2

<script type="text/javascript">


jQuery(function ($) {
var $set = $('#selector1, #selector2')
$set.change(function () {
    $set.not(this).val(this.value)
})

})
</script>

<html> 
 <div style="float: right;margin-left: 10px;">
                    <div >
                    <select id="selector1" onchange="" 
 style="width:130px;">
                      <option selected diabled hidden value="">Select Volume 
 Type</option>
                        <option value="1">Auto-Weekly</option>
                        <option value="2">Auto-Monthly</option>
                        <option value="3">Custom Weekly</option>
                              <option value="4">Custom Monthly</option>

                    </select></div>
                </div>
<td style="text-align: center;">

<select id="selector2" style="width:80px;">
<option selected="" diabled="" hidden="" value="0">Select Report 
Period</option>
                        <option value="1">Auto-Weekly</option>
                        <option value="2">Auto-Monthly</option>     
                            <option value="3">Custom Weekly</option>   
                             <option value="4">Custom Monthly</option>        
                    </select>

                            </td>


</html>

问题：现在我使用上面的javascript来匹配$ set的值。问题是我必须“点击”到下拉列表才能“更新”。例如，如果我在selector1中选择了选项值= 1，那么我必须“点击”选择器2以查看更新的值。

如果有更精致的解决方案，请帮忙吗？我稍后会使用这些选项，这就是为什么我需要2个单独的选择器并通过绑定匹配它们。

Answer 1

我已尝试过以下脚本，但仍需要我点击更新下拉列表值。

<script type="text/javascript">
$(document).ready(function(){
$('#selector1, #selector2').on('change',function() 
{   
 var report_answer = jQuery('#selector1').val();
 var report_type = jQuery('#selector2').val();  



var x=  document.getElementById("selector1").selectedIndex;
var y = document.getElementById("selector2").selectedIndex;

    report_type = this.report_answer;
    this.selectedIndex = y;
        y=report_type;
    return report_type;

});
});

在2个下拉菜单之间传递值。更新无需点击

1 个答案: