Question

我有此代码显示<option>代码中的所选选项：

<select name="garden" multiple="multiple">
    <option selected="selected">Flowers</option>
    <option>Shrubs</option>
    <option>Trees</option>
    <option>Bushes</option>
    <option>Grass</option>
    <option>Dirt</option>
</select>

<div class="display_text_here"></div>

<script>
    $("select").change(function () {
    var str = ""; 
    $("select option:selected").each(function () {
    str += $(this).text() + " ";
    });
    $(".display_text_here").text(str);
    })
   .change();
</script>

是否可以对下面的结构使用相同的<script>？当我点击某个国家/地区变为<li class="tf-child-false tf-selected">

时

<li>
    <div>Europe</div>
        <ul>
            <li tf-child-false tf-selected><div>United Kingdom</div></li> 
            <li><div>Sweden</div></li>
            <li><div>Germany</div></li>
            <li><div>France</div></li>
            <li><div>Spain</div></li>
            <li><div>Italy</div></li>
            <li><div>Austria</div></li>
            <li><div>Turkey</div></li>
            <li><div>Russia</div></li>
            <li><div>Denmark</div></li>
            <li><div>Finland</div></li>
            <li><div>Iceland</div></li>
            <li><div>Switzerland</div></li>
            <li><div>Hungary</div></li>
        </ul>
    </li>

我已尝试过以下操作，但它无效：

<script>
    $("ul").change(function () {
    var str = "";
    $("li class:tf-selected").each(function () {
    str += $(this).text() + " ";
    });
    $(".display_ text_here").text(str);
    })
    .change();
</script>

Answer 1

您无法绑定“ul”标记上的更改。你必须绑定ul上的点击，然后检查选择了哪个“li”：

//Here you should better use an ID for your "ul"
$("ul li").click(function () {
    $(this).toggleClass('tf-selected');
    var str = "";
      $('ul li[class=tf-selected]').each(function (index, element) {
    str += $(element).text() + " ";
  });
  $(".display_text_here").text(str);
});

Answer 2

就像我在评论中所说：$("ul").change(function () {不可能的倾听者，无法改变。你也许可以使用$("li").click(function () {

   $("li").click(function () {
        $(this).addClass('tf-selected');
          var str = "";
           $("li.tf-selected").each(function () {
               str += $(this).text() + " ";
           });
            $(".display_text_here").text(str);
    });

JSFIDDLE：http://jsfiddle.net/poignant_benjamin/kqfxLvda/

Answer 3

我只是找出溶剂，但有一点点

<script>
    $("li").click(function () {
   <!-- $(this).addClass('tf-selected');
    var str = "";
    $("li.active").each(function () {
    str +=  $(this).text() +" ";
    });
    $(".display_text_here").text(str);
});
</script>

<script>
     $("li").click(function () {
    <!--    $(this).addClass('tf-selected');
     var str = "";
    $("li.tf-open").each(function () {
    str +=  $(this).text() +" ";
    });
    $(".display_text_here2").text(str);
    });
</script>

<script>
    $("li").click(function () {
    <!--    $(this).addClass('tf-selected');
    var str = "";
    $("li.tf-selected").each(function () {
    str +=  $(this).text() +" ";
    });
    $(".display_text_here3").text(str);
    });
</script>
<div class="display_text_here"></div> 
<div class="display_text_here2"></div> 
<div class="display_text_here3"></div>

有这个问题。我有一个结构：

Tag1 Asia Southern-West India Pakistan Butan Southern-East Far-east Central Antarctica Africa Europe

当我点击标签1（课程活跃）和印度（课程选择）工作正常，但当我clcik亚洲（开放课程）返回亚洲南部 - 西南部 - 东部远东中部 - 所有的在亚洲以下的标签...我需要它会让我回到亚洲，而当我选择南西方只是西南。像这样：

标签1（活跃课程）亚洲（开放式）西南（开放式）印度（选定的班级）

如果我也从标签2中选择相同的选项，则必须同时选择Tag1和Tag2

标签2（课程有效）亚洲（开放式）西南（开放式）印度（选定的班级）

毕竟，谢谢你们的回答。

如何使用以下脚本在单击时显示树结构的元素

3 个答案: