Question

我有两个下拉选项，当您单击值为“other”的选项时，它会在下拉表单下方生成一个文本区域。

这两个区域都运行良好但是这样做我必须为两者创建单独的父包装器，我不希望这样，因为我将动态添加更多下拉列表，并且很难动态地创建更多唯一的父包装器div。 / p>

我希望每个下拉列表彼此不同，并生成自己的文本框。

我已在此pen

中提供了完整的代码

代码供您参考

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

非常感谢您的帮助。我非常需要这种帮助。请找到笔link以更好地了解整个问题。

Answer 1

请按照下面的笔，因为我修改了您的代码，因为我们希望动态触发元素：

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

另外，如果您想了解新添加的元素如何与事件一起使用

，请点击此链接

Event binding on dynamically created elements?

如何从另一个下拉区域中隔离下拉区域

1 个答案: