Javascript -模态选择选项(无法在模态中选择项)

Question

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

我想做的是：

• 当单击plots_container时，这将提示一个带有图表列表的模态。
• 当用户单击图表(例如：line plot )时，span中表示hello hello的内容将更改为<span>line plot</span>。
• 我想做一些和这一模一样的事情

现在，当单击plots_container时，我已经成功地提示了这个模式。

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

index.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>

application.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();
    }
  }); 
});

​

​

Answer 1

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

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

触发在模式中显示所选值的值变化。

Answer 2

如果我正确理解了你想要的东西，你可以这样做：

$('.plot_title').click(function(event){
  $('#plots_container > span').html(event.target.innerText);
})

尽管它只适用于您提供的html-结构，因为它有非常具体的css-选择器。