Question

我想知道在选择其他选择选项时是否可以更改选项选项值 - 我知道这听起来很奇怪，但请看下面的代码：

当我从“item”选项中选择“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>

在使用Jquery选择相应的选项时，是否可以更改选项选项值？

1 个答案: