Как открыть div, выбирая значение из выпадающего списка в jQuery

Question

Мне нужно приложение, в котором у меня есть выпадающее меню, где у меня есть некоторые значения, и мое требование состоит в том, что когда я нажимаю любое значение на этом выпадающем div, откроется div. Я реализовал это, но мой код не работает должным образом. Вот что я сделал до сих пор.

<div class="form-control"> 
     <label class="lebelMergin" for="branch_branchTypeId"> 
      <span class="spanMergin">Office Type<span class="required">*</span></span> 
      <s:select name="branch.branchTypeId" id="branch_branchTypeId" requiredLabel="true" list="%{dataArr['branchTypeList']}" listValue="name" 
      listKey="id" headerKey="" headerValue="Select Type" >   
      </s:select> 
     </label>     
    </div> 

    <div style='display:none;' id='business'>Business Name 
    <br/>&nbsp; 
    <br/>&nbsp; 
    <input type='text' class='text' name='business' value size='20' /> 
    <br/> 
    </div> 

<style> 
#business { 
display:none; 
    } 

    </style> 


<script> 
(function() { 

$('#branch_branchTypeId').on('change', function() { 
$("#business").css('display', (this.value == '1') ? 'block' : 'none'); 
}); 

Но когда я нажав на что значение в выпадающем только для одного значения поле ввода подходит, но я хочу функциональность для всех value.Here я прилагаю экран ... Для HO поле ввода подходит, но для других это не так.

Answer 1

Каких теги "вариант" сделать йо есть в вашем выбора (раскрывающийся список)? Может быть, это будет помощь:

$('#branch_branchTypeId').on('change', function (event) { 
    var vl = $(this).val(); 
    var target = $("#business"); 
    if (vl) { 
     target.show(); 
    } else { 
     target.hide(); 
    } 
}); 

Answer 2

Проблема в вашем тесте this.value == 1. Вместо этого вы можете использовать this.selectedIndex.

$('#branch_branchTypeId').on('change', function() { 
    $("#business").css('display', (this.selectedIndex >= 1) ? 'block' : 'none'); 
}); 

После Вашего комментария, я предположил, что selectIndex == 0 соответствует опции по умолчанию, с business DIV не отображается.

См Fiddle: http://jsfiddle.net/3nvdeoab/