显示所选选项的内容答案

【问题标题】：Show Content of Selected Options显示所选选项的内容
【发布时间】：2014-09-13 11:49:44
【问题描述】：

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

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

“我喜欢 巧克力 冰淇淋配焦糖”。

<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。
- 香草、巧克力、草莓、洒、巧克力酱和焦糖不必以粗体显示。
- 选择列表中的第一个选项默认显示。 IE。： “我喜欢香草冰淇淋与Sprinkles”。

【问题讨论】：

标签： javascript html show options selected

【解决方案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;
}

【讨论】：

你知道如何在没有 jQuery 的情况下做到这一点吗？仅使用 javascript。
检查这个-document.querySelector("#icecream").addEventListener('change', function(event){ document.querySelector("#icecreamFlavor").innerHTML = event.value; } ); document.querySelector("#topping").addEventListener('change', function(event){ document.querySelector("#toppingFlavor").innerHTML = event.value; });

【解决方案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)，所以我不得不删除它。

【讨论】：

感谢@DecentDabbler，您的回答非常详尽:)

【解决方案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;
};

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

【讨论】：

感谢@VaibhavKatole，但您的示例显示了一个选项的 value，我希望它显示一个选项的 content。 IE。 巧克力蘸酱而不是巧克力酱。你能改变你的代码吗？
很高兴帮助@Macchiato，请查看更新的答案和小提琴。它会解决你的问题。 :)