javascript - JQuery/Javascript - 设置多个下拉列表以匹配链接点击时的主下拉列表

Question

在我的网页标题中有一个下拉列表。用户可以在此处设置一个值，然后单击“全部设置”。

<th>
    <span ="MASTERAVAIL" >
        <select  id="CATAVAIL"  class="myselect  form-control"  name="CATAVAIL" >
            <option  selected value="">Select a value</option>
            <option value="Standard">Standard</option>
            <option value="MTO">MTO</option>
            <option value="Express">Express</option>
        </select>
    </span>
    <a class="SetAvail" href="javascript:void(0);">Set All</a>
</th>

单击“全部设置”后，应设置以下所有实例以匹配上述选择。

<td class="one td_left" nowrap="nowrap">
    <span ="CATAVAIL" >
        <select  id="CATAVAIL"  class="myselect  form-control"  name="CATAVAIL" >
            <option  selected value="">Select a value</option>
            <option value="Standard">Standard</option>
            <option value="MTO">MTO</option>
            <option value="Express">Express</option>
        </select>
    </span>
</td>

我怎样才能实现这个目标？我有一些代码可以在使用输入框时起作用...但不能使用下拉列表...这是那段代码。它与其他输入框相关，但适用于它们。我只是无法将其调整为下拉列表。

<script type="text/javascript">
    var $=jQuery;
    $(document).ready(function() {
        var myInput = $('#MASTERDATE4');
         $('.SetDate4').click(function() {
               $('input.CATDISCSTART').val(myInput.val());
         });
    });
</script>

Answer 1

您错误地使用了许多类名，将它们与 id 互换。这是什么 <span ="CATAVAIL" > ？并且多个元素也具有相同的 id，您不应该这样做，并在 select 更改而不是 document.ready() 上设置输入值.

$(document).ready(function() {
  var myInput;
  $('#CATAVAIL').change(function() {
    myInput = $(this).val();

  });

  $('.SetAvail').click(function() {
    console.log(myInput)
    $('#CATAVAIL2').val(myInput);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<th>
  <span>
<select  id="CATAVAIL"  class="myselect  form-control"  name="CATAVAIL" >
<option  selected value="">Select a value</option>
<option value="Standard">Standard</option>
<option value="MTO">MTO</option>
<option value="Express">Express</option>
</select>
</span>
  <a class="SetAvail" href="javascript:void(0);">Set All</a>
</th>
<td class="one td_left" nowrap="nowrap">
  <span>
<select  id="CATAVAIL2"  class="myselect  form-control"  name="CATAVAIL" >
<option  selected value="">Select a value</option>
<option value="Standard">Standard</option>
<option value="MTO">MTO</option>
<option value="Express">Express</option>
</select>
</span>
</td>