Изменение формы отображается при изменении значения выпадающего

javascript jquery html

55 просмотра

2 ответа

У меня есть эта 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, но, похоже, это не работает. Может кто-то указать, что не так? Спасибо!

Автор: Kylie Irwin Источник Размещён: 08.11.2019 11:13

Ответы (2)


4 плюса

Решение

Ваш код Javascript неверен ... Сначала удалите точки с запятой из оператора if, а затем используйте Javascript ниже.

Также ваш HTML-код должен быть переформатирован, как показано ниже.

Идентификатор индивида теперь привязан к одному родительскому div, который охватывает div для отдельных данных, вместо того, чтобы иметь несколько div с одним и тем же идентификатором.

$(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();
    }
  });
}); 
<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>

Автор: Sohlowmawn Размещён: 20.08.2016 11:36

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-элемента должен быть уникальный идентификатор, для нескольких можно использовать clsss. Пожалуйста, не забудьте добавить библиотеку jquery над кодом js.

Автор: kumarsher45 Размещён: 20.08.2016 11:39
Вопросы из категории :
32x32