Блог

Главная - Вопросы по программированию - Скрытое поле выбора

Скрытое поле выбора

#html #jquery

#HTML #jquery

Вопрос:

Я хочу выбрать и показать другое, основываясь на том, что выбрано и работает, моя проблема в том, что я хочу показать поле выбора class sub , вместо того, чтобы быть скрытым.

Я пытался удалить $sub.hide(); и .show(); , но если я попытаюсь, это нарушит весь код и перестанет работать, потому что необходимо выбрать главное поле выбора, чтобы вывести другое поле выбора, но я хочу, чтобы другое поле выбора не было скрыто

 <!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <select>
    <!--This is main selectbox.-->
    <option value="">Select</option>
    <option>ONE</option>
    <option>two</option>
    <option>three</option>
    <option>four</option>
  </select>
  <select class="sub">
    <!--another selectbox for option one.-->
    <option>test1</option>
    <option>test1</option>
  </select>
  <select class="sub">
    <!--another selectbox for option two.-->
    <option>test2</option>
    <option>test2</option>
  </select>
  <select class="sub">
    <!--another selectbox for option three.-->
    <option>test3</option>
    <option>test3</option>
  </select>
  <select class="sub">
    <!--another selectbox for option four.-->
    <option>test4</option>
    <option>test4</option>
  </select>
  <script type="text/javascript">
    var $sub = $('select.sub');
    $('select').first().change(function() {
      $sub.hide();
      if (this.selectedIndex > 0)
        $sub.eq(this.selectedIndex - 1).show();
    }).change();
  </script>
</body>

</html>

Комментарии:

1. Мне непонятно, какую проблему вы описываете. Если вы удалите $sub.hide() , другие <select> элементы не будут скрыты. (Что затем делает весь показанный здесь JavaScript спорным, поэтому все это можно удалить.) Что «ломает весь код и перестает работать»? В чем именно проблема?

2. проблема в том, что я не хочу, чтобы <select class=»sub»> был скрыт по умолчанию

3. Затем удалите $sub.hide(); . Но вопрос подразумевает, что вы уже знали это, так что именно не работает?

Ответ №1:

Если вы не хотите select.sub , чтобы оно было скрыто по умолчанию, вам не следует запускать изменение в прослушивателе событий onchange. Что в любом случае не имеет смысла.

Вы прослушиваете событие изменения, но также запускаете событие изменения.

Удалите .change() в конце прослушивателя событий.

 <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
        <select>
        <!--This is main selectbox.-->
        <option value="">Select</option>
        <option>ONE</option>
        <option>two</option>
        <option>three</option>
        <option>four</option>
    </select>
    <select class="sub">
        <!--another selectbox for option one.-->
        <option>test1</option>
        <option>test1</option>
    </select>
    <select class="sub">
        <!--another selectbox for option two.-->
        <option>test2</option>
        <option>test2</option>
    </select>
    <select class="sub">
        <!--another selectbox for option three.-->
        <option>test3</option>
        <option>test3</option>
    </select>
    <select class="sub">
        <!--another selectbox for option four.-->
        <option>test4</option>
        <option>test4</option>
    </select>    
        <script type="text/javascript">    
    var $sub = $('select.sub');
    $('select').first().change(function () {    
        $sub.hide();
        if (this.selectedIndex > 0)
           $sub.eq(this.selectedIndex - 1).show();
    });
    </script>
    </body>
    </html>