在HTML中使用jQuery隐藏下拉选择框中选项更改时的div。

Question

为了直接说明我的目标，我想在选择<SELECT>中的某个<OPTION>时隐藏特定的DIV。以下是我的HTML标记：

选择

<select name="cutoffselect" id="cutoff" class="text ui-widget-content ui-corner-all" style="padding-right: 80px;">
        <option value="">Choose One</option>
        <option value="daily">Daily</option>
        <option value="weekly">Weekly</option>
        <option value="semimonthly">Semi Monthly</option>
        <option value="monthly">Monthly</option>
  </select>

如果选择了DAILY，我想隐藏的DIV。

时期

<div class="input-group-addon" style="width:20%;" title='Filter By' id = "perioddiv">   
    <!--PERIOD-->
       <label for="period" style="padding-right: 10px;margin-top:7px;" visible="false">Period</label>
          <select name="period" id="period" class="text ui-widget-content ui-corner-all">
                <option value="">Choose Period</option>
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
                <option value="">4</option>
                <option value="">5</option>
          </select>
    <!--PERIOD-->
  </div>

我尝试使用不同的查询方式，但我无法做到我想要的。以下是我使用的查询，但它并没有起作用，如果可以的话，请给我另一个jQuery建议，可能更有效。提前感谢大家。

以下是查询语句：

  <script type="text/javascript">
     $("#cutoffselect").change(function(){
       $("#perioddiv div:eq(" + $(this).attr("selectedIndex") + ")").show();
    });
  </script>

- Dodgeball

---

你想隐藏哪个元素，是div还是其他的什么东西？ - Balachandran

当我在下拉菜单中选择“每日”时，我想隐藏id为“perioddiv”的div。这可能吗？谢谢。 - Dodgeball

你选择了 id=cutoff 并使用了 $("#cutoffselect")，请更正。我不理解 $("#perioddiv div:eq(" + $(this).attr("selectedIndex") + ")").show();，你想要做什么？ - Bhushan Kawadkar

Answer 1

这将做到它：

<script type="text/javascript">
     $(function(){
         $("#cutoff").change(function(){
             if($(this).val()=='daily'){
                 $('#perioddiv').hide();
             }
             else{
                 $('#perioddiv').show();
             }
         });
     });
  </script>

- Amin Jafari

---

感谢您的回答，先生。 - Dodgeball

Answer 2

Here is your answer. $('#cutoff').change(function () { 当#cutoff发生变化时执行以下操作：

    if ($('#cutoff').find(":selected").text() == 'Daily') {
        $('#perioddiv').hide();
    } else {
        $('#perioddiv').show();
    }

});

jsfiddle:

http://jsfiddle.net/LNMW3/

- learner420

Answer 3

如果选择了 daily 选项，想要隐藏 id=perioddiv 的 div，可以尝试以下 jQuery 代码：

<script type="text/javascript">
     // bind change event using '#cutoff' as select id="cutoff"
     $("#cutoff").change(function(){
       // hide if selected value is "daily"
       if($(this).val() == "daily")
          $("#perioddiv").hide();
       else
          $("#perioddiv").show();
    });
  </script>

- Bhushan Kawadkar

---

感谢您的回答，先生。 - Dodgeball

Answer 4

请查看Fiddle

使用ID，您可以轻松地进行排序：

$("#selectorID").hide();

- Emma

---

感谢您的回答，先生。 - Dodgeball

非常抱歉。感谢您的帮助，女士。对于我的错误，我表示最诚挚的道歉。 - Dodgeball

Answer 5

尝试

 $("#cutoff").change(function () {
    if (this.value == "daily") {
        $("#perioddiv").hide();
    } else {
        $("#perioddiv").show();
    }
});

演示

- Balachandran

---

感谢您的回答，先生。 - Dodgeball

Answer 6

检查所选选项是否为每日，然后隐藏该 div。

$(document).ready(function(){

    $('#cutoff').change(function(){

        if($('#cutoff option:selected').val() == 'daily')
        {
            $('#perioddiv').hide();
        }
        else
        {
            $('#perioddiv').show();
        }

     });

});

演示 FIDDLE

- Varun Nath

Answer 7

尝试这个：

$('#period').change(function(){

    // check if "daily" is selected
    if($(this).val() == "daily") {
        $('#perioddiv').hide();
    }

});

- Amit Malakar