Question

因此，我一直试图在一天的大部分时间内创建一个动态表。我创建了两个下拉选项，它们会根据选择的内容显示不同的表结果，并使之起作用，但是我意识到了一个错误。我只能将一个字作为下拉选项。任何带有多个单词的选项都会中断。

这是我下面的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的完全入门者，因此非常感谢您提供任何帮助，建议或见解。

再次感谢！

Answer 1

那是因为ID中不能有空格。如果您选择的是two words，则此行

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

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

通常，这样的操作是通过使用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()来检索选定的值，而不是查找选定的选项并从中检索文本或value属性。

选择包含空格的下拉选项

1 个答案: