选择包含间距的下拉选项答案

【问题标题】：Select Dropdown Option that contains spacing选择包含间距的下拉选项
【发布时间】：2020-04-11 13:13:54
【问题描述】：

所以我一直在尝试为一天中的大部分时间创建一个动态表。我创建了两个下拉选项，它们将根据选择的内容显示不同的表格结果并使其正常工作，但是我意识到了一个错误。我只能将一个词作为下拉选项。任何超过一个单词的选项都会中断。

下面是我的 html 代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dynamic Tables</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src="js/showhide.js"></script>
</head>
<body>

    <h2>HTML Table</h2>
<!-- Drop Down Begin -->
<div id="benefits" style="display: inline-block;">
Benefits
</div>

<div id="skyecc" style="display: inline-block;">
    SKYECC
    </div>


<div id="option1" style="display: inline-block;">
    <select class="selectOption">
    <option>Analytics1</option>
    <option>Translation1</option>
    <option>Poll1</option>
    </select>
</div>

<div id="option2" style="display: inline-block;">
    <select class="selectOption2">
    <option>Analytics2</option>
    <option>Translation2</option>
    <option>Poll2</option>
    </select>
</div>
<!-- Drop Down End -->

<br><br>



<!-- Table and Drop Down Results Start -->




<div id="changingArea" style="display: inline-block;">

    <div id="Analytics1" class="desc">
        <table style="float: left;">
            <tr>
            <td>Analytics P1</td>
            </tr>
            <tr>
            <td>Analytics P2</td>
            </tr>
            <tr>
            <td>Analytics P3</td>
            </tr>
          </table>



    </div>

    <div id="Translation1" class="desc">
        <table style="float: left;">
            <tr>
            <td>Translation P1</td>
            </tr>
            <tr>
            <td>Translation P2</td>
            </tr>
            <tr>
            <td>Translation P3</td>
            </tr>
          </table>

    </div>
    <div id="Poll1" class="desc">
        <table style="float: left;">
            <tr>
            <td>Poll P1</td>
            </tr>
            <tr>
            <td>Poll P2</td>
            </tr>
            <tr>
            <td>Poll P3</td>
            </tr>
          </table>

    </div>
</div>


<div id="changingArea2" style="display: inline-block;">
    <div id="Analytics2" class="desc2">
        <table style="float: left;">
            <tr>
            <td>Analytics T1</td>
            </tr>
            <tr>
            <td>Analytics T2</td>
            </tr>
            <tr>
            <td>Analytics T3</td>
            </tr>
          </table>



    </div>
    <div id="Translation2" class="desc2">
        <table style="float: left;">
            <tr>
            <td>Translation2 T1</td>
            </tr>
            <tr>
            <td>Translation2 T2</td>
            </tr>
            <tr>
            <td>Translation2 T3</td>
            </tr>
          </table>

    </div>
    <div id="Poll2" class="desc2">
        <table style="float: left;">
            <tr>
            <td>Poll2 T1</td>
            </tr>
            <tr>
            <td>Poll2 T2</td>
            </tr>
            <tr>
            <td>Poll2 T3</td>
            </tr>
          </table>
    </div>
</div>


<!-- Table and Drop Down Results End -->
</body>
</html>

这是我的 css 代码：

h2 {
    text-align: center;
}


.desc {display: none;}

这是我的 js：

$(function(){
    $('.selectOption').change(function(){
      var selected = $(this).find(':selected').text();
      //alert(selected);
      $(".desc").hide();
       $('#' + selected).show();
    }).change()
});


$(function(){
    $('.selectOption2').change(function(){
      var selected = $(this).find(':selected').text();
      //alert(selected);
      $(".desc2").hide();
       $('#' + selected).show();
    }).change()
});

由于我是 js 方面的菜鸟，任何帮助、建议或见解都将不胜感激。

再次提前致谢！

【问题讨论】：

标签： javascript jquery dynamic html-table

【解决方案1】：

那是因为 ID 中不能有空格。如果你的选项是two words 那么这一行

$('#' + selected).show();

正在选择 #two words - 在 ID 为 two 的元素内标记 words。

通常这样的事情是通过对 ID 和选项值使用串联值来完成的，同时让选项文本可读。

这样选择

<select class="selectOption">
    <option value="analytics1">Analytics 1</option>
    <option value="translation1">Translation 1</option>
    <option value="poll1">Poll 1</option>
</select>

您可以使用简单的$(this).val() 检索选定的值，而不是查找选定的选项并从中检索文本或值属性。

【讨论】：

非常感谢，我按照你说的做了，效果很好！