Question

我正在创建一个表单，该表单将需要这些输入组的多个实例以及一个下拉列表和一个输入字段。当其中一个下拉选项被选中时，我希望该dropdown-toggle按钮的文本更改为单击的链接的标签，并更改输入字段的类型。

如果页面上有一个输入组，则可以很好地完成这项工作，但是当我有多个输入组时，该功能会同时影响所有这些输入组。我不想依赖ID选择器，因此我可以使用一个函数来允许页面上的所有输入组，但允许分别修改它们。

HTML：

<div class="input-group mb-3 dropdown-toggle-input">
     <div class="input-group-prepend">
          <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">DROPDOWN</button>
          <div class="dropdown-menu">
               <a class="dropdown-item" data-source="enterURL" href="#">CHOICE 1</a>
               <a class="dropdown-item" data-source="uploadImage" href="#">CHOICE 2</a>
          </div>
     </div>
     <input type="url" class="form-control" aria-label="billboardBackground" name="billboardBackground" id="billboardBackground">
</div>

JS：

$('.dropdown-toggle-input .dropdown-menu a').on('click', function(event){
    $(".btn.dropdown-toggle:first-child").text($(this).text());
    $(".btn.dropdown-toggle:first-child").val($(this).val());
    var input = $(this).text();
    if (input == 'CHOICE 2'){
        $('.dropdown-toggle-input input.form-control').attr('type', 'file').css('padding', '3px 6px');
    } else {
        $('.dropdown-toggle-input input.form-control').attr('type', 'url').css('padding', '6px 12px');
    }
});

Bootstrap 4输入组的下拉列表未定位到父级

0 个答案: