当 select 使用 Jquery 对应的 select 选项时，是否可以更改 select 选项值？

Question

我想知道在 select 另一个 select 选项时是否可以更改 select 选项值 - 我知道这听起来很奇怪，但请参阅代码如下：

当我从 "item" 选项 select 选项 "Ball" 时， "img" 和 "item" 选项变为 "ball.png" 并且"ball.gif"。反之亦然？

    <label for="item">Item:</lable>
    <select name="item">
        <option value="Ball">Ball</option>
        <option value="Door">Door</option>
        <option value="Pen">Pen</option>
        <option value="Apple">Apple</option>
    </select>

    <label for="img">Image:</lable>
    <select name="img">
        <option value="ball.png"><img src="ball.png"></option>
        <option value="door.png"><img src="door.png"</option>
        <option value="pen.png"><img src="pen.png"</option>
        <option value="apple.png"><img src="apple.png"</option>
    </select>

    <label for="item">Image Animation:</lable>
    <select name="item">
        <option value="ball.gif"><img src="ball.gif"</option>
        <option value="door.gif"><img src="door.gif"</option>
        <option value="pen.gif"><img src="pen.gif"</option>
        <option value="apple.gif"><img src="apple.gif"</option>
    </select>

Answer 1

下面的代码应该可以工作

<label for="item">Item:</lable>
<select name="item" id="select-1">
    <option value="Ball">Ball</option>
    <option value="Door">Door</option>
    <option value="Pen">Pen</option>
    <option value="Apple">Apple</option>
</select>

<label for="img">Image:</lable>
<select name="img" id="select-2">
    <option value="ball.png"><img src="ball.png"></option>
    <option value="door.png"><img src="door.png"></option>
    <option value="pen.png"><img src="pen.png"></option>
    <option value="apple.png"><img src="apple.png"></option>
</select>

<label for="item">Image Animation:</lable>
<select name="animation" id="select-2">
    <option value="ball.gif"><img src="ball.gif"></option>
    <option value="door.gif"><img src="door.gif"></option>
    <option value="pen.gif"><img src="pen.gif"></option>
    <option value="apple.gif"><img src="apple.gif"></option>
</select>
<script>

   $("#select-1").on("change", function() {
      var value = $(this).val();
      $("#select-2").val(value.toLowerCase()+".png");
      $("#select-3").val(value.toLowerCase()+".gif");
   });
</script>

当 select 使用 Jquery 对应的 select 选项时，是否可以更改 select 选项值？

Would it be possible to change the select option value when selecting corresponding select option with Jquery?

jquery

html-select