Javascript 如何在jQuery中打开从下拉列表中选择值的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');
});

---

但是，当我在下拉列表中只为一个值单击该值时，输入框将出现，但我需要所有值的功能。这里我附加了屏幕…对于HO，输入框将出现，但对于其他人，它不是

问题在于您的测试。此值==1。您可以改为使用此.selectedIndex

在您的评论之后，我假设selectIndex==0对应于默认选项，而不显示business div

---

请参阅Fiddle:

选择下拉列表中有哪些选项标签？ 也许这会有帮助：

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

---

您可以使用toggleClass来分离逻辑和css，这将使您在更大的项目中的生活更加轻松。当默认的选择类型出现时，输入框将消失。请帮助非常感谢。我还可以获得与id对应的名称吗？抱歉，但我不明白您的意思。如果您需要从所选选项中获取一些额外数据，您可以找到如下选项：var selectedOption=$'select option:selected'；在您的情况下，它可能类似于：var selectedOption=$this.find'option:selected'；var someData=selectedOption.attr'value'；

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