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

Question

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

我想做的是：

• 当点击plots_container时，会提示一个带有图表列表的模态
• 当用户点击图表（例如：模式中的line plot）时，范围hello hello中的内容会更改为<span>line plot</span>
• 我想做一些与this
完全相同的事情

目前，我在点击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选择器。