Question

我有以下HTML

<div>
    <div id='a'>
        <ul>
            <li>a</li>
        </ul>
    </div>
    <select>
        <option id='Hello'>Hello</option>
    </select>
</div>

现在，当我在<select>中选择任何选项时，<ul>标记应该隐藏。

我在下面累了，但似乎没有用。

 $('#Hello').click(function () {
     $(this).closest('#a').find('ul').css('display', 'none');
 });

Answer 1

首先，您需要在selectbox上监听onchange事件，选项onclick不可靠。然后，您需要使用$.fn.prev而不是closest找到上一个元素：

$('select').change(function () {
    $(this).prev('#a').find('ul').hide();
});

Answer 2

您应该附加事件（更改而不是单击）以选择元素并检查所选选项是否具有必需的id，如果是，则隐藏所需的ul：

 $('select').change(function () {
   $(this).prev().find('ul').toggle($(this).find('option:selected').attr('id')!="Hello");
 }).change();

<强> Working Demo

Answer 3

您只能使用.hide()代替.css()并在select元素上使用change事件：

$('#Hello').on("change", function () {
     $(this).closest('#a').find('ul').hide();
});

Answer 4

为什么不简单以下？

$("select").change(function() { $("#a ul").hide(); });

Answer 5

  <div>
        <div id='a'>
            <ul>
                <li data-link="link_a">a</li>
            </ul>
        </div>
        <select>
            <option value='link_a'>Hello</option>
        </select>
    </div>


$('#Hello').click(function () {
   $('a[data-link="'+$(this).val()+'"]').hide();
});

Answer 6

添加任何jquery.min.js＆amp;然后放在脚本下面

<script>
$(document).ready(function(){
  $("select").click(function() {
    $("#a ul").hide();
  });
});
</script>

使用jquery隐藏另一个父母的孩子

6 个答案: