Question

我建立的网站涉及客户需要从列表中选择设备类型，然后才能提交到数据库。

我需要这个功能，以便当用户选择＆＃34; Chromebook＆＃34;在我的HTML选择下拉菜单中，下面会显示一条消息。

我已经实现了这一目标，但取得了不同程度的成功。

首次加载页面时，尽管选择框显示其默认选项，但仍显示带有我的消息的div。仅当选择了某个选项（Chromebook除外）时，div才会消失。）

我已经嘲笑了JSFiddle中重要的一点，并在下面发布了我的代码。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<div id="media">
 <select>
   <option selected hidden disabled value="">Select One...</option>
   <option value="laptop">Laptop</option>
   <option value="chromebook">Chromebook</option>
   <option value="desktop">Desktop</option>
 </select>
</div>

<div class='notice'>
    Some text...
</div>

<script>
$(document).ready( function() { 
if($('#media select').val() == 'chromebook'){ //'.val()'
       $('.notice').show();
   }


$('#media select').change(function(){
   if($(this).val() == 'chromebook'){ //'.val()'
       $('.notice').show();
       return true;
   }
   $('.notice').hide();
});
});
</script>

如果某人可以修复我的代码或建议更好的方法来实现正确的结果，那将是理想的。

先谢谢！

杰克

Answer 1

您忘记在页面加载时将文字显示为none

$(document).ready( function() { 
if($('#media select').val() == 'chromebook'){ //'.val()'
       $('.notice').show();
}


$('#media select').change(function(){
   if($(this).val() == 'chromebook'){ //'.val()'
       $('.notice').show();
       return true;
   }
   $('.notice').hide();
});
});

.notice{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="media">
 <select>
   <option selected hidden disabled value="">Select One...</option>
   <option value="laptop">Laptop</option>
   <option value="chromebook">Chromebook</option>
   <option value="desktop">Desktop</option>
 </select>
</div>

<div class='notice'>
    Some text...
</div>

Answer 2

您只需在.ready函数的开头设置$('.notice').hide();即可。最初没有任何东西隐藏通知

Answer 3

您可以使用：

.toggle( display )：display：使用true显示元素，使用false隐藏它。
.trigger()在创建后立即触发更改事件：

$(document).ready( function() {
  $('#media select').change(function(){
    $('.notice').toggle($(this).val() == 'chromebook');
  }).trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="media">
    <select>
        <option selected hidden disabled value="">Select One...</option>
        <option value="laptop">Laptop</option>
        <option value="chromebook">Chromebook</option>
        <option value="desktop">Desktop</option>
    </select>
</div>

<div class='notice'>
    Some text...
</div>

Answer 4

只需对代码进行一次小更新即可。在文档就绪行之后添加$('.notice').hide();，如下所示。

＆＃13;

$(document).ready( function() { 
    $('.notice').hide();
    
    if($('#media select').val() == 'chromebook'){ //'.val()'
           $('.notice').show();
       }


    $('#media select').change(function(){
       if($(this).val() == 'chromebook'){ //'.val()'
           $('.notice').show();
           return true;
       }
       $('.notice').hide();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="media">
 <select>
   <option selected hidden disabled value="">Select One...</option>
   <option value="laptop">Laptop</option>
   <option value="chromebook">Chromebook</option>
   <option value="desktop">Desktop</option>
 </select>
</div>

<div class='notice'>
Some text...
</div>

＆＃13;

HTML选择框关于显示/隐藏div的JQuery问题

4 个答案: