时间戳

首页 > 解决方案 > foreach 循环中的下拉菜单

javascript - foreach 循环中的下拉菜单

问题描述

我在 foreach 循环中有一个列表，在每个循环中都有一个从下拉选择框中编辑的选项，但是当添加多个这些选择框时，单​​击服务并下拉选项时，整个事情将停止工作。

这是代码：

<select id="aroptions" name="aroptions" data-id="<?php echo $get['id'];?>">
       <option value="none">Please Select your service</option>
       <option class="tw" value="artw">Option 1</option>
       <option class="aiop" value="araiop">Option 2</option>
       <option class="rr" value="rr">Option 3</option>
       <option class="aw" value="aw">Option 4</option>
       <option class="gr" value="gr">Option 5</option>
    </select>

    <div class="twsettings" data-id="<?php echo $get['id'];?>" style="display:none">
    <div class="form-group row" style="padding: 10px;">
        <label for="username" class="col-sm-4 col-form-label">
             Username:
        </label>
        <div class="col-sm-8">
            <input type="text" class="form-control-plaintext input-lg" style="height: 39px; width:100%;" 
              name="twusername" id="twusername" size="45" />
        </div>
        <br><br>
        <label for="username" class="col-sm-4 col-form-label">
            Series Name:
        </label>
        <div class="col-sm-8">
            <input type="text" data-id="<?php echo $get['id'];?>" class="form-control-plaintext input-lg" style="height: 39px; width:100%;" 
              name="twseries" id="twseries" size="45" />
        </div>
        <br><br>
        <label for="default" class="col-sm-4 col-form-label">
            Set as Default:
        </label>
        <div class="col-sm-8">
        <input type="checkbox" name="main_ar_tw" data-id="<?php echo $get['id'];?>" style="width: 5%;height: 34px;" value="Yes"/><br>
        </div>
    </div>
    </div>

非工作js如下

 $('select').change(function(){
if ($(this).val() == "tw"){
    $(this).closest('.twsettings').css("display", "none");
    $(this).closest('.twsettings').removeClass("show");
} });

`现在我明白，要让这个工作，每个下拉选择都必须有一个唯一的 id，否则它们将同时下拉，因此 data-id 值，但对于我的一生，我不记得如何去做。

任何帮助，将不胜感激 ：）

我创造了一个小提琴供你玩。注意：data-setting-id 在循环的每次迭代中都是不同的。JSFiddle] 1（当前下拉菜单仅在第一个选项上起作用，因为其他选项未添加到小提琴中）

标签： javascriptjqueryselectforeach

解决方案

我要做的第一个更改是让您的select元素具有唯一的 ID：

<select id="aroptions<?php echo $get['id'];?>" name="aroptions" data-id="<?php echo $get['id'];?>">

不过，仅此一项并不能为您做很多事情。首先，您需要确保在显示任何 div 之前隐藏所有 div。然后，您需要确保在选择选项时，同时使用选定值和选择元素的 ID 来确定要显示的 div。

对于隐藏，我给每个设置 div 一个类，option-group并在我们将运行的 Javascript 中$(".option-group").hide();。

为了显示正确的设置 div，我们将连接相应的选项值与select元素 ID 以创建 div data-setting-id，例如 data-setting-id="artw<?php echo $get['id'];?>"，data-setting-id="araiop<?php echo $get['id'];?>" 您需要为每个选项组 div 遵循此模式。

然后在 Javascript 中，我们执行相同的操作并将所选选项与元素 ID 连接起来：var $elm = $('*[data-setting-id="' + selectedOpt + dataId + '"]');

这是我更新您在小提琴中提供的输出的方式。

<select id="aroptions123" name="aroptions" data-id="123">
           <option value="none">Please Select your service</option>
           <option class="tw" value="artw">Option 1</option>
           <option class="aiop" value="araiop">Option 2</option>
           <option class="rr" value="rr">Option 3</option>
           <option class="aw" value="aw">Option 4</option>
           <option class="gr" value="gr">Option 5</option>
        </select>

<div class="option-group twsettings" data-setting-id="artw123" style="display:none">
  <div class="form-group row" style="padding: 10px;">
    <label for="username" class="col-sm-4 col-form-label">
                 Username:
            </label>
    <div class="col-sm-8">
      <input type="text" class="form-control-plaintext input-lg" style="height: 39px; width:100%;" name="twusername" id="twusername" size="45" />
    </div>
    <br><br>
    <label for="username" class="col-sm-4 col-form-label">
                Series Name:
            </label>
    <div class="col-sm-8">
      <input type="text" data-id="123" class="form-control-plaintext input-lg" style="height: 39px; width:100%;" name="twseries" id="twseries" size="45" />
    </div>
    <br><br>
    <label for="default" class="col-sm-4 col-form-label">
                Set as Default:
            </label>
    <div class="col-sm-8">
      <input type="checkbox" name="main_ar_tw" data-id="123" style="width: 5%;height: 34px;" value="Yes" /><br>
    </div>
  </div>
</div>
<div class="option-group aiopsettings" data-setting-id="araiop123" style="display:none">
  <div class="form-group row" style="padding: 10px;">
    <label for="username" class="col-sm-4 col-form-label">
                Campaign ID:
            </label>
    <div class="col-sm-8">
      <input type="text" class="form-control-plaintext input-lg" style="height: 39px; width:100%;" name="aiopid" id="aiopid" size="45" />
    </div>
    <br><br>
    <label for="default" class="col-sm-4 col-form-label">
                Set as Default:
            </label>
    <div class="col-sm-8">
      <input type="checkbox" name="main_ar_aiop" style="width: 5%;height: 34px;" value="Yes" /><br>
    </div>
  </div>
</div>

Javascript：

$('select').change(function() {
  var dataId = $(this).attr('data-id');
  var selectedOpt = $(this).val();
  // This is the settings div. Do whatever you want
  var $elm = $('*[data-setting-id="' + selectedOpt + dataId + '"]');
  $(".option-group").hide();
  $elm.show();
  //$elm.removeClass("show");
})

这是更新的小提琴

请注意，确实有许多不同的方法可以实现这一点。我在这里给你的可能不是最好的或最有效的。我只是尽可能多地使用您提供的代码给您一个快速的答案。

推荐阅读