CODEWITHSUNDEEP
javascriptjqueryhtml
archvist
archvist

Reputation: 722

jQuery show/hide using select

I'm trying to apply a show/hide jQuery function to a html drop down box. I want to be able to hide one option and show another when an option from the drop down is selected. This jQuery works with a normal button but not the drop down.

<select style="margin-left:30px;">
    <option value="" selected="selected">Please select a region</option>
    <option id="uk_btn" value="1">UK</option>
    <option id="usa_btn" value="2">USA</option>
</select>

<script>
    $("#usa_btn").click(function(){
      $("#usa_tbl").show();
      $("#uk_tbl").hide();
    });
</script>
<script>
    $("#uk_btn").click(function(){
      $("#uk_tbl").show();
      $("#usa_tbl").hide();
    });
</script>

Upvotes: 1

Views: 100

Answers (5)

palaѕн
palaѕн

Reputation: 73896

You can do this:

// Cache the elements first
var $usa_tbl = $("#usa_tbl");
var $uk_tbl = $("#uk_tbl");

// Add a change event handler for the select element
$("#select_ID").change(function () {
    if (this.value === '2') {
        $usa_tbl.show();
        $uk_tbl.hide();
    } else if (this.value === '1') {
        $uk_tbl.show();
        $usa_tbl.hide();
    } else {
        $uk_tbl.hide();
        $usa_tbl.hide();
    }
});

where, select_ID is the ID of the select element.

Fiddle Demo

Upvotes: 2

GautamD31
GautamD31

Reputation: 28763

You need to put the event for the select box like

$('select').change(function(){
     var val = $(this + 'option:selected').attr('id');
     if(val == 'uk_btn') {
          $("#usa_tbl").hide();
          $("#uk_tbl").show();
     } elseif(val == 'usa_btn') {
          $("#uk_tbl").hide();
          $("#usa_tbl").show();
     }
});

You can also check using value of the check box like

var val = $(this).val();
if(val == '1') {
     $("#usa_tbl").hide();
     $("#uk_tbl").show();
} elseif (val == '2') {
     $("#uk_tbl").hide();
     $("#usa_tbl").show();
}

Upvotes: 5

Arun P Johny
Arun P Johny

Reputation: 388316

<select id="country" style="margin-left:30px;">

then

$("#country").change(function(){
   $('[id$="_tbl"]').hide();
   $('#' + this.value.replace('_btn', '_tbl')) .show()
});

Upvotes: 1

Rituraj ratan
Rituraj ratan

Reputation: 10378

if you have no id on select then you can try

$('select').change(function(){
     var val = $(this ).val();
     if(val == 2) {
          $("#usa_tbl").show();
          $("#uk_tbl").hide();
     } else {
          $("#uk_tbl").show();
          $("#usa_tbl").hide();
     }
});

or you can do by id

<select id="select_id" style="margin-left:30px;">

now 

$('#select_id').change(function(){
....same as previous
});

Upvotes: 1

Praveen
Praveen

Reputation: 56501

Root cause: There is no id matching for select in your js.

<select style="margin-left:30px;">  //id attribute is missing

instead use change event handler

 <select style="margin-left:30px;" id="usa_btn">

JS:

 $("#usa_btn").change(function(){
      alert($(this).val());  // to get the value of selected option based on it 
                             // add your condition
      $("#usa_tbl").show();
      $("#uk_tbl").hide();
    });

Upvotes: 1

Related Questions