Как я могу изолировать выпадающую область от другой выпадающей области

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

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

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

Я сделал весь код доступным в этом ручке.

  • Код для справки

HTML

        <section id="alterationForm1">
      <div class="card">
        <div class="imgCard">
          <img src="http://abhisheksuresh.online/alter/assets/uploadImage.svg" alt="upload-image" height="128px" width="128px">
          <span class="badge badge-success" style="z-index: 1; position: absolute;" data-toggle="tooltip" data-placement="left" title="Tap on the image to upload picture of your defected garment"><i class="fa fa-question-circle" aria-hidden="true"></i></span>
        </div>
        <!--Dropdown List-->
        <div class="form-group">
          <label for="exampleFormControlSelect1"><p class="dropDownLabel">Select alteration type</p></label>
          <select class="form-control alterationTypeSelect" name="alterationTypeSelect">
                  <option value="button">Button</option>
                  <option value="stitching">Stitching</option>
                  <option value="cloth">Cloth</option>
                  <option value="fabrics">Fabrics</option>
                  <option value="otherClick">Other</option>
                </select>
        </div>
        <div class="hideMe textBoxDiv">
          <div class="form-group">
            <label for="exampleFormControlTextarea1">Additional alteration details</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                    </div>
                </div><!--text box div-->
                 <div class="submitButton text-center">
                     <a href="#" class="btn btn-success btn-pill">Submit</a>
                 </div><!--submitButton-->
              </div><!--card-->
    </section><!--alteration form-->
    <div data-duplicate="demo" class="demoClass">
            <div class="card">
            <div class="imgCard">
                <img src="http://abhisheksuresh.online/alter/assets/uploadImage.svg" alt="upload-image" height="128px" width="128px">
                <span class="badge badge-success" style="z-index: 1; position: absolute;" data-toggle="tooltip" data-placement="left" title="Tap on the image to upload picture of your defected garment"><i class="fa fa-question-circle" aria-hidden="true"></i></span>
            </div>
            <!--Dropdown List-->
            <div class="form-group">
                <label for="exampleFormControlSelect1"><p class="dropDownLabel">Select alteration type</p></label>
                <select class="form-control alterationTypeSelect" name="alterationTypeSelect">
                  <option value="button">Button</option>
                  <option value="stitching">Stitching</option>
                  <option value="cloth">Cloth</option>
                  <option value="fabrics">Fabrics</option>
                  <option value="otherClick">Other</option>
                </select>
            </div>
            <div class="hideMe textBoxDiv">
                <div class="form-group">
                    <label for="exampleFormControlTextarea1">Additional alteration details</label>
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                </div>
            </div><!--text box div-->
            <div class="submitButton text-center">
                <a href="#" class="btn btn-success btn-pill">Submit</a>
            </div><!--submitButton-->
    </div><!--card-->
         <div id="addOnButton" class="text-center">
            <button class="btn-danger btn-sm" data-duplicate-add="demo">Add More</button>
        </div>
    </div><!--demo class-->

JS

    //When clicked on option with "other" value
    $('#alterationForm1 .alterationTypeSelect').on('change', function(){
      var val = $(this).val();
      if(val === 'otherClick') {
        $('#alterationForm1 .textBoxDiv').removeClass('hideMe');
      }
        else{
            $('#alterationForm1 .textBoxDiv').addClass('hideMe');
        }
      });
    $('#alterationSection2 .alterationTypeSelect').on('change', function(){
      var val = $(this).val();
      if (val === 'otherClick') {
        $('#alterationSection2 .textBoxDiv').removeClass('hideMe');
      }
        else{
            $('#alterationSection2 .textBoxDiv').addClass('hideMe');
        }
      });

    $('.demoClass .alterationTypeSelect').on('change',function(){
         var val = $(this).val();
      if (val === 'otherClick') {
        $('.demoClass .textBoxDiv').removeClass('hideMe');
      }
        else{
            $('.demoClass .textBoxDiv').addClass('hideMe');
        }
      });


    //Dynamic Adding
    $("#czContainer").czMore();

Большое спасибо за помощь. Я очень нуждаюсь в этой помощи. Пожалуйста, найдите ручку ссылку, чтобы лучше понять всю проблему.


javascript dynamic html jquery
person AbhiSheikhBin    schedule 29.03.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

пожалуйста, следуйте ручке ниже, так как я изменил ваш код, так как мы хотим, чтобы элементы запускались динамически:

https://codepen.io/anon/pen/NYyvpy?editors=1011

    //question mark tooltip
    $('[data-toggle="tooltip"]').tooltip()
    //When clicked on other button
    $('body').on('change','.alterationTypeSelect', function(){
      console.log(544);
      var val = $(this).val();
      if(val === 'otherClick') {
        $(this).parent().parent().find('.textBoxDiv').removeClass('hideMe');
      }
        else{
            $(this).parent().parent().find('.textBoxDiv').addClass('hideMe');
        }
      });

    //Dynamic Adding
    $("#czContainer").czMore();

Кроме того, перейдите по этой ссылке, если вы хотите понять, как новые элементы работают с событиями.

Привязка событий к динамически создаваемым элементам?

person Afsar    schedule 29.03.2018
comment
Большое спасибо за ответ Афсар. Большая помощь. Я не могу поверить, что решение может быть таким простым. своих мелочей в jquery я не заметил. Я должен вернуться к основам. Еще раз спасибо. - person AbhiSheikhBin; 29.03.2018