Bagaimana cara mengisolasi area dropdown dari area dropdown lainnya

Saya memiliki dua pilihan dropdown di mana ketika Anda mengklik opsi dengan nilai "lainnya", itu menghasilkan area teks tepat di bawah formulir dropdown.

Kedua area berfungsi dengan baik tetapi untuk melakukannya saya harus membuat pembungkus induk terpisah untuk keduanya dan saya tidak menginginkannya karena saya akan menambahkan lebih banyak dropdown secara dinamis dan akan sulit untuk membuat div pembungkus induk yang lebih unik secara dinamis.

Saya ingin setiap dropdown berbeda satu sama lain dengan kotak teksnya sendiri yang dihasilkan.

Saya telah menyediakan seluruh kode di pen ini

  • Kode untuk referensi Anda

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="/id#" 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="/id#" 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();

Terima kasih banyak atas bantuannya. Saya sangat membutuhkan bantuan ini. Silakan temukan link pena untuk lebih memahami keseluruhan masalahnya.


javascript dynamic html jquery
person AbhiSheikhBin    schedule 29.03.2018    source sumber

Jawaban (1)


arrow_upward
1
arrow_downward

silakan ikuti pena di bawah ini karena saya telah memodifikasi kode Anda karena kami ingin elemen dipicu secara dinamis:

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

Ikuti juga tautan ini jika Anda ingin memahami cara kerja elemen yang baru ditambahkan dengan acara

Pengikatan peristiwa pada elemen yang dibuat secara dinamis?

person Afsar    schedule 29.03.2018
comment
Terima kasih banyak atas jawabannya Afsar. Sangat membantu. Saya tidak percaya solusinya bisa sesederhana ini. itu hal-hal kecil di jquery yang tidak saya perhatikan. Saya harus kembali ke dasar. Sekali lagi terima kasih. - person AbhiSheikhBin; 29.03.2018