javascript - Javascript - 模式选择选项（无法选择模式中的项目）

Question

有人可以告诉我如何扩展我的代码吗？

我想做的是：

• 单击时plots_container，会提示一个包含图表列表的模式
• 当用户点击图表时（例如：line plot在模式中），span 中声明hellohello 的内容变为<span>line plot</span>
• 我想做这样的事情

目前，我刚刚设法在plots_container单击时提示模式。

如果有人可以查看我在以下文件中尝试过的内容并提供建议或反馈，我将不胜感激。

索引.html

<span class="modal_content">
    <select class="hide seriesDetails" title="Type of Chart for this Series" id="ChartType" name="ChartType"><option selected="selected" value="17">Pie</option></select>
    <div class="seriesDetails" id="plots_container">
        <span>hello</span>
    </div>
    <div id="plotList">
        <ul>
            <li class="business">
                <div class="image_text_content">
                    <div class="image_container"><img src="Content/images/plot-thumbs/1-scatter-plot.jpg" alt="scatter-plot"></div>
                    <div class="plot_title">scatter plot</div>
                </div>
                <div class="image_text_content">
                    <div class="image_container"><img src="Content/images/plot-thumbs/2-line-plot.jpg" alt="scatter-plot"></div>
                    <div class="plot_title">line plot</div>
                </div>
                </li>
            </ul>
     </div>
 </span>

应用程序.js

// modal to display types of plots
$(document).ready(function() {
  $('#plots_container').click(function() {
    $('#plotList').fadeToggle();
  })
  $(document).mouseup(function (e) {
    var container = $("#plotList");
    if (!container.is(e.target) // if the target of the click isn't the container...
      && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
      container.fadeOut();
    }
  }); 
});

标签： javascripthtml

Answer 1

快速 JSFiddle：https ://jsfiddle.net/hxnm7q2L/1/展示如何使用

.addEventListener("change", function(e) {

触发显示模态中选定值的值变化。