如何禁用下拉选择菜单中的第一个选项？答案

【问题标题】：How to disable first option in Drop down select menu?如何禁用下拉选择菜单中的第一个选项？
【发布时间】：2017-07-30 00:59:54
【问题描述】：

我在我的网站右侧选择了菜单选项“我希望赞助”。默认下拉菜单设置为“选择”选项我想要当有人按下去按钮页面不会去任何地方。目前，当用户在没有选择选项的情况下按下 go 按钮时，它会转到“404”页面。如何在不选择下拉菜单中的两个给定选项的情况下停止页面去某个地方？

还附上屏幕截图，链接是：http://ilmoamal.org/newsite2017/sponsor-now-testing/

enter image description here

【问题讨论】：

标签： javascript html css wordpress

【解决方案1】：

Using CSS you can remove!

<style>

 #link:focus option:first-of-type {
        display: none;
    }
</style>

【讨论】：

【解决方案2】：

您可以在 WordPress 主题的 footer.php 文件中使用它。如果未选择任何选项，这将禁用“开始”按钮。

<script>
jQuery( document ).ready(function() {
jQuery(".wpcf7-form .submit input").prop('disabled', true);
jQuery(".wpcf7-form select option:first").prop('disabled', true);

jQuery("#link").change(function(){
var conceptName = jQuery('#link').find(":selected").text();

if(conceptName == "select"){
} else {
    jQuery(".wpcf7-form .submit input").prop('disabled', false);
}
});
});
</script>

jQuery( document ).ready(function() {
    jQuery(".wpcf7-form .submit input").prop('disabled', true);
    jQuery(".wpcf7-form select option:first").prop('disabled', true);
jQuery(".wpcf7-form select option:first").prop('selected', true);
    
    jQuery("#link").change(function(){
    var conceptName = jQuery('#link').find(":selected").text();
    
    if(conceptName == "select"){

    } else {
        jQuery(".wpcf7-form .submit input").prop('disabled', false);
    }
    });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form class="wpcf7-form">
<h4>I wish to sponsor</h4>
<p><select id="link"><option>Select</option><option value="http://ilmoamal.org/bms/apps_available.php?start=1&amp;link=72f061b63526b44879240efb612646ed&amp;project_id=1&amp;submit=+Go+">A Child’s Education</option><option value="http://ilmoamal.org/bms/apps_available.php?start=1&amp;link=72f061b63526b44879240efb612646ed&amp;project_id=3&amp;submit=+Go+">A Family Help</option></select></p>
<div class="submit"> <input onclick="go()" name="submit" value="Go" type="button" id="submit"> </div>
</div>
</form>

您可以点击上面的“Show Code Snippet”链接运行并测试这段代码。

【讨论】：

感谢 Navneet Yadav 你解决了我的问题，现在如果不选择选项，go 按钮就不会去任何地方
如果你能点出正确的答案真的很感激：p

【解决方案3】：

在 function.php 文件中添加以下代码以删除选择选项

<?php
function myscript() {
?>
<script type="text/javascript">
$(document).ready(function()
{
   $("#link").children().first().remove();           
});
</script>
<?php
}
add_action( 'wp_footer', 'myscript' );
?>

【讨论】：

【解决方案4】：

我看到您使用联系表格 7 选择框。并且还看到您在选择框中为第二个和第三个选项设置了值，但在第一个选项中该选项没有值。最好的方法是将值 # 设置为要禁用的 first option。然后让我知道结果。我的意思是

<option value="#">Select</option>

【讨论】：

您的解决方案是公平的，但是我必须在我使用表单或将来使用的每个页面上执行此操作，我将使用以下答案解决此问题，因为它由 JS 和它会自动在所有页面上运行 Souvik Sikdar

【解决方案5】：

只需将其添加到您的脚本中 -

jQuery(document).ready(function(){
  jQuery('#sidebar #link > option:first-child').attr('disabled', 'disabled');
});

【讨论】：