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

Question

I have select menu option in right side of my website "I wish to sponsor". Default drop down menu set to "select" option I want when someone press go button page will not go anywhere. Currently when user press go button without selection option it goes to "404" page. How can I stop page to go somewhere without selection two given option in drop down?

Screenshot also attached and link is : http://ilmoamal.org/newsite2017/sponsor-now-testing/

enter image description here

Answer 1

add below code in function.php file for remove select option

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

Answer 2

I have seen that you use contact form 7 select box. And also seen that you have set value for 2nd and 3rd option in select box but in first option there are no value for that option. The best way is set the value # to first option which you want to disable. Then let me know the result. I mean

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

Answer 3

You can use this in your footer.php file of WordPress theme. This will disable the "Go" button if no option is selected.

<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> 

You can click on " Show Code Snippet " link above to RUN and test this code.

Answer 4

just add this in your script-

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

Answer 5

Using CSS you can remove!

<style>

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