jquery - Showhide div based on selected option value in Javascript - Stack Overflow

admin管理员组

文章数量:1357615

I wonder why it isn't working.

Here is my JS:

$("#cat-code").change(function(){
  var value = $("#cat-code option:selected").val();
  if (value == "10400000"){
    $("#div1").show();
    $("#div2").hide();
  }
});

Select Tag:

<select class="cat-code" id="cat-code" name="project_procurement_management_plan[items_attributes][0][category_id]">
  <option value="1">10400000</option>
  <option value="2">10401000</option>
</select>

Divs to show or hide:

<div class="div1">hi</div>
<div class="div2">hello</div>

Any workarounds will be appreciated. Thanks.

I wonder why it isn't working.

Here is my JS:

$("#cat-code").change(function(){
  var value = $("#cat-code option:selected").val();
  if (value == "10400000"){
    $("#div1").show();
    $("#div2").hide();
  }
});

Select Tag:

<select class="cat-code" id="cat-code" name="project_procurement_management_plan[items_attributes][0][category_id]">
  <option value="1">10400000</option>
  <option value="2">10401000</option>
</select>

Divs to show or hide:

<div class="div1">hi</div>
<div class="div2">hello</div>

Any workarounds will be appreciated. Thanks.

• javascript
• jquery

Share Improve this question Follow edited Mar 23, 2013 at 23:57 dda 6,21322 gold badges2727 silver badges3535 bronze badges asked Mar 23, 2013 at 23:56 xirukitepexirukitepe 1,61577 gold badges2727 silver badges5454 bronze badges 1

• replace class with id in div tags. – alioguzhan Commented Mar 24, 2013 at 0:01

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

It looks like your JS is reference to DOM objects with IDs, but your HTML has classes.

Try this JS instead:

$(".div1").show();
$(".div2").hide();

You've specifically set the values to 1 and 2, so that's probably what they are then:

$("#cat-code").change(function(){
  var value = this.value;
  if (value == "1"){
    $(".div1").show();
    $(".div2").hide();
  }
});

FIDDLE

The options text will only be used as the selects value if the option does not have a value, and to get the selected value all you need is this.value inside the handler for the select.

本文标签： jqueryShowhide div based on selected option value in JavascriptStack Overflow