jQuery显示/隐藏Divs问题

Question

I am running a SQL query to get dropdown select value. The values are now int.

What I need to do is show the div when Dropdown Value is "Other"

So I am using this Jquery code to get the text of the dropdown that is selected. Which is working fine.

Working Example Fiddle

<select name="hours" id="hours" class="time">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">Other</option>
<option value="06">06</option>
</select>

Script

<script type="text/javascript"> 
$('#hours').change(function() {
$('#hours_text').val( this.value );
$('#hours_text2').val($('option:selected',this).text());
});
</script> 

The issue is when I am hiding the div. The text is not passing into Jquery. Its only accepting the option value. I need it to accept the text value which is "Other" not 05

Before the values were varchar so this was not an issue before.

Here is the code for hiding and showing Div.(not working) Fiddle

$('#hours').change(function () {
$('#hours_text').val($('option:selected', this).text());
$('.showotherpDescription').hide();
$('#' + $(this).val()).show.text();
});

Answer 1

Try this:

$('#hours').change(function () {
    $('#hours_text').val($('option:selected', this).text());
    $('.showotherpDescription').hide();
    $('#' + $('option:selected', this).text()).show();
});

DEMO

Answer 2

用于检查选项包含的文本的属性将是.html（）而不是.val（）

Answer 3

Could you do something like this:

$('#hours').change(function () {
  var sel = $('option:selected', this).text();
  if (sel == "Other") {
    $('.showotherpDescription').show();
  } else {
    $('.showotherpDescription').hide();
  } 
});

Answer 4

Here, this should do the trick. I added some console output so you can see what and why:

$('#hours').change(function () {
    $('#hours_text').val($('option:selected', this).text());
    $('.showotherpDescription').hide();
    console.log($(this).val());
    console.log(this.selectedIndex);
    console.log(this.options[this.selectedIndex]);
    console.log(this.options[this.selectedIndex].innerHTML);
    $('#' + this.options[this.selectedIndex].innerHTML).show();
});