如何在其他下拉菜单中选择相同的下拉选项时选择下拉选项?

huangapple go评论51阅读模式
英文:

How to select dropdown option when the same dropdown option is selected in other dropwown?

问题

这里有两个下拉菜单,每个下拉菜单都有不同的ID。我应该如何选择在这两个下拉菜单中选择的相同的值/选项?

英文:

Here I’ve 2 dropdowns

<label for="cars">Choose a car:</label>

<select name="cars" id="cars1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>


<label for="cars">Choose a car:</label>

<select name="cars" id="cars2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

2 different IDs for each dropdown: how do I select the same dropdown value/option which is selected in either of the dropdowns?

答案1

得分: 1

I understand that you only want the translated content, so here it is:

Not sure if I understood your question correctly...

$(document).on('change', '[name="cars"]', function(){
  $('[name="cars"]').val( $(this).val() );
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="cars">Choose a car:</label>
<select name="cars" id="cars1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<br><br>
<label for="cars">Choose a car:</label>
<select name="cars" id="cars2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Is there anything else you need?

英文:

Not sure if I understood your question correctly...

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).on(&#39;change&#39;, &#39;[name=&quot;cars&quot;]&#39;, function(){
  $(&#39;[name=&quot;cars&quot;]&#39;).val( $(this).val() );
})

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;label for=&quot;cars&quot;&gt;Choose a car:&lt;/label&gt;
&lt;select name=&quot;cars&quot; id=&quot;cars1&quot;&gt;
  &lt;option value=&quot;volvo&quot;&gt;Volvo&lt;/option&gt;
  &lt;option value=&quot;saab&quot;&gt;Saab&lt;/option&gt;
  &lt;option value=&quot;mercedes&quot;&gt;Mercedes&lt;/option&gt;
  &lt;option value=&quot;audi&quot;&gt;Audi&lt;/option&gt;
&lt;/select&gt;
&lt;br&gt;&lt;br&gt;
&lt;label for=&quot;cars&quot;&gt;Choose a car:&lt;/label&gt;
&lt;select name=&quot;cars&quot; id=&quot;cars2&quot;&gt;
  &lt;option value=&quot;volvo&quot;&gt;Volvo&lt;/option&gt;
  &lt;option value=&quot;saab&quot;&gt;Saab&lt;/option&gt;
  &lt;option value=&quot;mercedes&quot;&gt;Mercedes&lt;/option&gt;
  &lt;option value=&quot;audi&quot;&gt;Audi&lt;/option&gt;
&lt;/select&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月13日 15:51:52
  • 转载请务必保留本文链接:https://go.coder-hub.com/76241643.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定