Question

我想在span标签中显示所选选项的内容以及相应的ID。

因此，当您选择巧克力作为冰淇淋口味并选择焦糖时，底部的文字将更改为：

“我爱巧克力冰淇淋 Caramel ”。

<ul id="icecream" style="list-style:none;line-height:30px;">
  <li>
    <select id="icecream">
      <option value="vanilla">Vanilla</option>
      <option value="chocolate">Chocolate</option>
      <option value="strawberry">Strawberry</option>
    </select>
  </li>
  <li>
    <select id="topping">
      <option value="sprinkles">Sprinkles</option>
      <option value="chocolatedip">Chocolate Dip</option>
      <option value="caramel">Caramel</option>
    </select>
  </li>
  <li>I love <span id="icecreamFlavor"></span> ice cream with <span id="toppingFlavor"></span>.</li>
</ul>

有没有人知道可以做到这一点的JavaScript？

的更新
- 不使用jQuery - 香草，巧克力，草莓，巧克力，巧克力酱和焦糖不必以粗体显示。
- 选择列表中的第一个选项显示为默认选项。即： “我爱香草冰淇淋 Sprinkles ”。

Answer 1

在javascript中添加以下代码

$('#icecream').change(function(){    
    $('#icecreamFlavor').text($(this).val());
});

$('#topping').change(function(){   
    $('#toppingFlavor').text($(this).val());
});

在css中添加以下代码

#icecreamFlavor, #toppingFlavor{
    font-weight:bold;
    font-style:italic;
}

Answer 2

这是一种方式：

<!doctype html>
<html>
<head>
  <script>
    // wait for DOM content to finish loading
    window.addEventListener( 'DOMContentLoaded', function DOMContentLoaded() {
      // no need to listen anymore
      this.removeEventListener( 'DOMContentLoaded', DOMContentLoaded );

      // get the DOM elements
      var icecream       = document.getElementById( 'icecream' );
      var topping        = document.getElementById( 'topping' );
      var icecreamFlavor = document.getElementById( 'icecreamFlavor' );
      var toppingFlavor  = document.getElementById( 'toppingFlavor' );

      // define an event listener that changes our output based on the selected options
      var onSelectChange = function( event ) {
        icecreamFlavor.textContent = icecream.options[ icecream.selectedIndex ].textContent;
        toppingFlavor.textContent  = topping.options[ topping.selectedIndex ].textContent;
      }

      // listen for the change events with the event listener
      icecream.addEventListener( 'change', onSelectChange );
      topping.addEventListener( 'change', onSelectChange );

      // initialize our output
      onSelectChange();
    } );
  </script>
</head>
<body>
<ul style="list-style:none;line-height:30px;">
  <li>
  <select id="icecream">
    <option value="vanilla">Vanilla</option>
    <option value="chocolate">Chocolate</option>
    <option value="strawberry">Strawberry</option>
  </select>
  </li>
  <li>
  <select id="topping">
    <option value="sprinkles">Sprinkles</option>
    <option value="chocolatedip">Chocolate Dip</option>
    <option value="caramel">Caramel</option>
  </select>
  </li>
  <li>I love <span id="icecreamFlavor"></span> ice cream with <span id="toppingFlavor"></span>.</li>
</ul>
</body>
</html>

fiddle demo

P.S。：您的<ul>有一个有冲突的id（icecream），所以我不得不删除它。

Answer 3

更新了答案

Updated Javascript Demo

将'ul'元素id更改为'iceCreamList'，因为html元素应该有唯一的id来识别它们。试试这个，

function selectIceCream(that){
    var iceCreamType  = that.options[that.selectedIndex].text;
    document.getElementById('icecreamFlavor').innerHTML = iceCreamType;
};

function selectToppings(that){
    var toppingType  = that.options[that.selectedIndex].text;
    document.getElementById('toppingFlavor').innerHTML = toppingType;
};

此外，您应该考虑在选择列表中放置默认选项。

显示所选选项的内容

3 个答案: