javascript - 如何使用 Javascript/Jquery 在选择表单菜单中动态显示占位符并取消选择其他选项

Question

我有以下下拉菜单:

<form action="...">
    <select name="fruits" id="my-fruits">
        <option value="" disabled selected>Select a fruit</option>
        <option value="apple">apple</option>
        <option value="orange">orange</option>
        <option value="peach">peach</option>
    </select>
    <select name="animals" id="my-animals">
        <option value="" disabled selected>Select an animal</option>
        <option value="dog">dog</option>
        <option value="cat">cat</option>
        <option value="iguana">iguana</option>
        ></select>
</form>

我需要的是当用户更改一个字段中的选定选项时(即在更改事件时)，占位符将显示在另一个字段上，反之亦然。

例如，假设用户已经选择了 orange在#my-fruits 。现在，当用户更改选择时 dog至cat在#my-animals :

1. 占位符"Select a fruit"自动显示在 #my-fruits字段，以及
2. 那么，<option value="orange">删除其“selected ”属性

Answer 1

艾拉，试试这个:

$('#my-fruits')
  .add('#my-animals')
  .on('change', function () {
    $(this).siblings().prop('selectedIndex', 0);
  });

此外，删除此行中不必要的箭头:

></select>

祝你好运;)