更改下拉值

时间：2016-08-20 11:16:27

标签： javascript jquery html

我有这个HTML表单和jQuery脚本：

$(document).ready(function() {
  $('#accounttype').on('change', function() {

    if (this.value == '1') {
      $("#corporate").show();

    } else if (this.value == '0') {
      $("#individual").show();

    } else {
      $("#corporate").hide();
      $("#individual").hide();
    }

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
  <form role="form">
    <div class="form-group row">
      <label class="col-md-5 control-label">Customer Account ID:</label>
      <div class="col-md-7">
        <input class="form-control" type="text" placeholder="ACT-2015-000011" disabled>
      </div>
    </div>
    <div class="form-group row">
      <label class="col-md-5 control-label">Customer Account Type:</label>
      <div class="col-md-7">
        <select id='accounttype' class="form-control">
          <option value="0">Individual</option>
          <option value="1">Corporate</option>
        </select>
      </div>
    </div>
    <div id='corporate' class="form-group row">
      <label class="col-md-5 control-label">Customer Account Name:</label>
      <div class="col-md-7">
        <input class="form-control" type="text" placeholder="5SOS">
      </div>
    </div>
    <div id='individual' class="form-group row">
      <label class="col-md-5 control-label">Customer ID:</label>
      <div class="col-md-7">
        <input class="form-control" type="text" placeholder="CST-2015-000011">
      </div>
    </div>
    <div id='individual' class="form-group row">
      <label class="col-md-5 control-label">Customer First Name:</label>
      <div class="col-md-7">
        <input class="form-control" type="text" placeholder="Luke">
      </div>
    </div>
    <div id='individual' class="form-group row">
      <label class="col-md-5 control-label">Customer Middle Name:</label>
      <div class="col-md-7">
        <input class="form-control" type="text" placeholder="Robert">
      </div>
    </div>
    <div id='individual' class="form-group row">
      <label class="col-md-5 control-label">Customer Last Name:</label>
      <div class="col-md-7">
        <input class="form-control" type="text" placeholder="Hemmings">
      </div>
    </div>
    <div id='individual' class="form-group row">
      <label class="col-md-5 control-label">Gender:</label>
      <div class="col-md-7">
        <input class="form-control" type="text" placeholder="Male">
      </div>
    </div>
    <div id='individual' class="form-group row">
      <label class="col-md-5 control-label">Birthday:</label>
      <div class="col-md-7">
        <input class="form-control" type="text" placeholder="01/01/01">
      </div>
    </div>
    <div class="col-md-offset-9">
      <a href="cis.html" type="button" class="btn btn-primary">Create/Enroll</a>
    </div>
  </form>
</div>

我需要做的是根据下拉菜单中使用 onchange 选择的值显示表单，但它似乎不起作用。有人可以指出什么是错的吗？谢谢！

2 个答案:

答案 0 :(得分：4)

您的Javascript代码不正确...首先从if语句中删除半冒号，然后使用下面的Javascript。

此外，您的HTML代码应重新格式化，如下所示。

id个人现在绑定到一个父div，它覆盖了单个数据的div，而不是具有多个具有相同id的div。

＆＃13;
＆＃13; 
$(document).ready(function() {
  $("#corporate").hide();
  $("#individual").hide();
  $('#accounttype').on('change', function() {
    if (this.value == '1') {
      $("#individual").hide();
      $("#corporate").show();
    } else if (this.value == '0') {
      $("#corporate").hide();
      $("#individual").show();
    } else {
      $("#corporate").hide();
      $("#individual").hide();
    }
  });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
  <form role="form">
    <div class="form-group row">
      <label class="col-md-5 control-label">Customer Account ID:</label>
      <div class="col-md-7">
        <input class="form-control" type="text" placeholder="ACT-2015-000011" disabled>
      </div>
    </div>
    <div class="form-group row">
      <label class="col-md-5 control-label">Customer Account Type:</label>
      <div class="col-md-7">
        <select id='accounttype' class="form-control">
          <option value="">Select account type...</option>
          <option value="0">Individual</option>
          <option value="1">Corporate</option>
        </select>
      </div>
    </div>
    <div id='corporate' class="form-group row">
      <label class="col-md-5 control-label">Customer Account Name:</label>
      <div class="col-md-7">
        <input class="form-control" type="text" placeholder="5SOS">
      </div>
    </div>
    <div id='individual'>
      <div class="form-group row">
        <label class="col-md-5 control-label">Customer ID:</label>
        <div class="col-md-7">
          <input class="form-control" type="text" placeholder="CST-2015-000011">
        </div>
      </div>
      <div class="form-group row">
        <label class="col-md-5 control-label">Customer First Name:</label>
        <div class="col-md-7">
          <input class="form-control" type="text" placeholder="Luke">
        </div>
      </div>
      <div class="form-group row">
        <label class="col-md-5 control-label">Customer Middle Name:</label>
        <div class="col-md-7">
          <input class="form-control" type="text" placeholder="Robert">
        </div>
      </div>
      <div class="form-group row">
        <label class="col-md-5 control-label">Customer Last Name:</label>
        <div class="col-md-7">
          <input class="form-control" type="text" placeholder="Hemmings">
        </div>
      </div>
      <div class="form-group row">
        <label class="col-md-5 control-label">Gender:</label>
        <div class="col-md-7">
          <input class="form-control" type="text" placeholder="Male">
        </div>
      </div>
      <div class="form-group row">
        <label class="col-md-5 control-label">Birthday:</label>
        <div class="col-md-7">
          <input class="form-control" type="text" placeholder="01/01/01">
        </div>
      </div>
    </div>
    <div class="col-md-offset-9">
      <a href="cis.html" type="button" class="btn btn-primary">Create/Enroll</a>
    </div>
  </form>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

<div class="panel-body">
<form role="form">
    <div class="form-group row">
        <label class="col-md-5 control-label">Customer Account ID:</label>
        <div class="col-md-7">
            <input class="form-control" type="text" placeholder="ACT-2015-000011" disabled>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-md-5 control-label">Customer Account Type:</label>
        <div class="col-md-7">
            <select id='accounttype' class="form-control">
                <option value="0">Individual</option>
                <option value="1">Corporate</option>
            </select>
        </div>
    </div>                        
    <div class="form-group row corporate">
        <label class="col-md-5 control-label">Customer Account Name:</label>
        <div class="col-md-7">
            <input class="form-control" type="text" placeholder="5SOS">
        </div>
    </div>
    <div class="form-group row individual">
        <label class="col-md-5 control-label">Customer ID:</label>
        <div class="col-md-7">
            <input class="form-control" type="text" placeholder="CST-2015-000011">
        </div>
    </div>
    <div class="form-group row individual">
        <label class="col-md-5 control-label">Customer First Name:</label>
        <div class="col-md-7">
            <input class="form-control" type="text" placeholder="Luke">
        </div>
    </div>
    <div class="form-group row individual">
        <label class="col-md-5 control-label">Customer Middle Name:</label>
        <div class="col-md-7">
            <input class="form-control" type="text" placeholder="Robert">

        </div>
    </div>
    <div class="form-group row individual">
        <label class="col-md-5 control-label">Customer Last Name:</label>
        <div class="col-md-7">
            <input class="form-control" type="text" placeholder="Hemmings">
        </div>
    </div>
    <div class="form-group row individual">
        <label class="col-md-5 control-label">Gender:</label>
        <div class="col-md-7">
            <input class="form-control" type="text" placeholder="Male">
        </div>
    </div>
    <div class="form-group row individual">
        <label class="col-md-5 control-label">Birthday:</label>
        <div class="col-md-7">
            <input class="form-control" type="text" placeholder="01/01/01">
        </div>
    </div>
    <div class="col-md-offset-9">
        <a href="cis.html" type="button" class="btn btn-primary">Create/Enroll</a>
    </div>
</form>
<script src="../resources/scripts/jquery2.2.0.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".corporate").hide();
        $(".individual").hide();
        $("#accounttype").change(function () {
            if ($(this).val() == 1) {
                $(".corporate").show();
                $(".individual").hide();
            } else if ($(this).val() == 0) {
                $(".individual").show();
                $(".corporate").hide();
            } else {
                $(".corporate").hide();
                $(".individual").hide();
            }
        });
    });
</script>

请尝试以上代码，希望这对您有帮助， 注意： - 每个html元素必须有唯一的id，对于多个你可以使用clss 请不要忘记在js代码上面添加jquery库

相关问题
最新问题