Fatal编程技术网
  • javascript/
  • Javascript 显示所选选项的内容

Javascript 显示所选选项的内容

javascript html

Javascript 显示所选选项的内容,javascript,html,show,options,selected,Javascript,Html,Show,Options,Selected,我想用相应的id在span标记中显示所选选项的内容 因此，当您选择巧克力作为冰淇淋口味，选择焦糖作为配料时，底部的文本将更改为： “我喜欢巧克力加焦糖的冰淇淋。”。 香草 巧克力 草莓的 洒 巧克力酱 焦糖 我喜欢加糖的冰淇淋 有人知道javascript可以做到这一点吗 更新： -不使用jQuery。 -香草、巧克力、草莓、果酱、巧克力酱和焦糖不必以粗体显示 -选择列表中的第一个选项显示为默认值。即。： “我喜欢香草冰淇淋，上面撒有的味道。”最新答案 将“ul”元素id

我想用相应的id在span标记中显示所选选项的内容

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

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

    

  • 
香草
巧克力
草莓的

    • 

  • 
洒
巧克力酱
焦糖

    • 

  • 我喜欢加糖的冰淇淋
    •

有人知道javascript可以做到这一点吗


更新：
-不使用jQuery。
-香草、巧克力、草莓、果酱、巧克力酱和焦糖不必以粗体显示
-选择列表中的第一个选项显示为默认值。即。：
“我喜欢香草冰淇淋，上面撒有的味道。”

最新答案

将“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;
};

也应考虑将默认选项放置在选择列表中。

< P> <强>更新答案<强> < /P>

将“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;
};

也应考虑将默认选项放置在选择列表中。

< P> <强>更新答案<强> < /P>

将“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;
};

也应考虑将默认选项放置在选择列表中。

< P> <强>更新答案<强> < /P>

将“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;
};

也应考虑将默认选项放置在选择列表中。

在JavaScript

中添加以下代码 
$('#icecream').change(function(){    
    $('#icecreamFlavor').text($(this).val());
});

$('#topping').change(function(){   
    $('#toppingFlavor').text($(this).val());
});
在css中添加以下代码

#icecreamFlavor, #toppingFlavor{
    font-weight:bold;
    font-style:italic;
}
在javascript中添加以下代码

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

$('#topping').change(function(){   
    $('#toppingFlavor').text($(this).val());
});
在css中添加以下代码

#icecreamFlavor, #toppingFlavor{
    font-weight:bold;
    font-style:italic;
}
在javascript中添加以下代码

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

$('#topping').change(function(){   
    $('#toppingFlavor').text($(this).val());
});
在css中添加以下代码

#icecreamFlavor, #toppingFlavor{
    font-weight:bold;
    font-style:italic;
}
在javascript中添加以下代码

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

$('#topping').change(function(){   
    $('#toppingFlavor').text($(this).val());
});
在css中添加以下代码

#icecreamFlavor, #toppingFlavor{
    font-weight:bold;
    font-style:italic;
}
这里有一个方法：

<!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>


//等待DOM内容完成加载
addEventListener（'DOMContentLoaded'，函数DOMContentLoaded（）{
//不用再听了
this.removeEventListener（'DOMContentLoaded'，DOMContentLoaded）；
//获取DOM元素
var icecream=document.getElementById（'icecream'）；
var topping=document.getElementById（'topping'）；
var icecreamFlavor=document.getElementById（'icecreamFlavor'）；
var-toppingFlavor=document.getElementById（'toppingFlavor'）；
//定义一个事件侦听器，该侦听器根据所选选项更改输出
var onSelectChange=函数（事件）{
icecreamFlavor.textContent=icecream.options[icecream.selectedIndex].textContent；
toppingFlavor.textContent=topping.options[topping.selectedIndex].textContent；
}
//使用事件侦听器侦听更改事件
冰激凌。添加的列表（'change'，onSelectChange）；
topping.addEventListener（'change'，onSelectChange）；
//初始化我们的输出
onSelectChange（）；
} );

    

  • 
香草
巧克力
草莓的

    • 

  • 
洒
巧克力酱
焦糖

    • 

  • 我喜欢加糖的冰淇淋
    •

注意：你的
有一个冲突的
id
（
冰淇淋
），所以我不得不把它删除。

这里有一个方法：

<!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>


//等待DOM内容完成加载
addEventListener（'DOMContentLoaded'，函数DOMContentLoaded（）{
//不用再听了
this.removeEventListener（'DOMContentLoaded'，DOMContentLoaded）；
//获取DOM元素
var icecream=document.getElementById（'icecream'）；
var topping=document.getElementById（'topping'）；
var icecreamFlavor=document.getElementById（'icecreamFlavor'）；
var-toppingFlavor=document.getElementById（'toppingFlavor'）；
//定义一个事件侦听器，该侦听器根据所选选项更改输出
var onSelectChange=函数（事件）{
icecreamFlavor.textContent=icecream.options[icecream.selectedIndex].textContent；
toppingFlavor.textContent=topping.options[topping.selectedIndex].textContent；
}
//使用事件侦听器侦听更改事件
冰激凌。添加的列表（'change'，onSelectChange）；
topping.addEventListener（'change'，onSelectChange）；
//初始化我们的输出
onSelectChange（）；
} );

    

  • 
香草
巧克力
草莓的

    • 

  • 
洒
巧克力酱
焦糖

    • 

  • 我喜欢加糖的冰淇淋
    •

注意：你的
有一个冲突的
id
（
冰淇淋
），所以我不得不把它删除。

这里有一个方法：

<!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>


//等待DOM内容完成加载
addEventListener（'DOMContentLoaded'，函数DOMContentLoaded（）{
//不用再听了
this.removeEventListener（'DOMContentLoaded'，DOMContentLoaded）；
//获取DOM元素
var icecream=document.getElementById（'icecream'）；
var topping=document.getElementById（'topping'）；
var icecreamFlavor=document.getElementById（'icecreamFlavor'）；
var-toppingFlavor=document.getElementById（'toppingFlavor'）；
//定义事件