时间戳

首页 > 解决方案 > 如何在jQuery填充的html元素行中的前一行中排除已选择的下拉值

jquery - 如何在jQuery填充的html元素行中的前一行中排除已选择的下拉值

问题描述

我在这里有一个使用 jQuery (3.x) 和 Bootstrap (4.x) 的html。如何排除在上一行中选择的下拉值。

例如，如果我在第一行中选择“最喜欢的汽车”作为“雷克萨斯”，然后单击“添加新”按钮，则新填充的行不应在“最喜欢的汽车”中包含“雷克萨斯”选项。我仍然是 jQuery 和 UI 的初学者/新手。

编辑

这是代码片段。最初我想为了简洁起见分享链接。现贴在这里供大家参考。

<html>

<head>
  <title>Add input field using jquery</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  <script>
    $(document)
      .ready(
        function() {
          var wrapper = $(".myFields");
          $(add_button)
            .click(
              function(e) {
                e.preventDefault();
                $(wrapper)
                  .append(
                    '<div class="form-group"><label class="label label-default" for="wish">Make a wish</label><input type="text" name="wish" class="form-control" required/><div class="form-group row"></div><div class="form-group row"><div class="col">		<input type="text" class="form-control" name="name" value="" placeholder="Your Name"> 	</div>	<div class="col">			<div class="input-group">				<input type="number" class="form-control" name="usdollars" min="500"					max="1000" value="" placeholder="USDollars (millions)">			</div>		</div>		<div class="col">			<select class="form-control">				<option value="none" disabled="disabled" selected>--Favorite					Car--</option>				<option value="volvo">Lexus</option>				<option value="saab">Mercedes</option>				<option value="mercedes">Alfa Romeo</option>				<option value="audi">Audi</option>				<option value="audi">BMW</option>				<option value="audi">Bentley</option>			</select>		</div>		<div class="col">			<select class="form-control">				<option value="none" disabled="disabled" selected>--Favorite					Girl--</option>				<option value="volvo">Colombian</option>				<option value="saab">Cuban</option>				<option value="mercedes">Australian</option>				<option value="audi">American</option>			</select>		</div>		<div class="col">			<select class="form-control">				<option value="none" disabled="disabled" selected>--FavoriteDrink--</option>				<option value="volvo">Tequila</option>				<option value="saab">Jack Daniels</option>				<option value="mercedes">Barrosa</option>				<option value="audi">Scotch</option>			</select>		</div>		<div class="col">			Want it all?<br> <input type="radio" name="decision" value="yes">			Yes<br> <input type="radio" name="decision" value="no">			No		</div>	</div><input type="submit" class="btn btn-primary btn-sm" value="Lets Do It !!"><a href="#"	class="btn btn-danger btn-sm delFld"><span class="fas fa-trash-alt"></span>Delete</a></div>'); //add fields
              });
          $(wrapper).on("click", ".delFld", function(e) {
            e.preventDefault();
            $(this).parent('div').remove();
          })
        });
  </script>
  <style>
    .container {
      padding: 15px 10px;
      margin: 15px 15px 15px 10px;
    }
    
    .addNew {
      margin: 0px 0px 0px 15px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="myFields"></div>
    <button id="add_button" class="addNew btn btn-success btn-sm">
    			<span class="fa fa-plus"></span>Add New
    		</button>
  </div>
</body>

</html>

标签： jqueryhtmlbootstrap-4

解决方案

在插入新模板之前，您需要迭代现有行并过滤所选值。

name我在这里使用了索引，因为如果您打算提交表单，您当前的代码没有您在某些时候需要的属性。在这种情况下，您可以按名称迭代它们而无需迭代行，但基本思想是相同的。

首先将您的模板分配给一个变量。为简洁起见，我在这里省略了它，但请参见下文。

// Turn the template into a jQuery object to ease filtering
let $template = $(template);
// Find existing rows
$('.myFields > .form-group').each(function() {    
    // Find select controls in the row
    $('select', this).each(function(index) {
        // Find selected value in the current control
        const alreadySelected = $(this).val();
        // Now find corresponding control in the template using the index
        $sel = $template.find('select').eq(index);
        // Remove the value and set the new options
        $sel.html($sel.children().filter(function() {
            return $(this).val() != alreadySelected;
        })).val('none'); // Workaround to reset the starting value
    });
});
$(wrapper).append($template); //add fields

完整代码：

<html>
<head>
  <title>Add input field using jquery</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  <script>
    $(document)
      .ready(
        function() {
          var wrapper = $(".myFields");
          $(add_button).click(
            function(e) {
              e.preventDefault();
              let template = '<div class="form-group"><label class="label label-default" for="wish">Make a wish</label><input type="text" name="wish" class="form-control" required/><div class="form-group row"></div><div class="form-group row"><div class="col">		<input type="text" class="form-control" name="name" value="" placeholder="Your Name"> 	</div>	<div class="col">			<div class="input-group">				<input type="number" class="form-control" name="usdollars" min="500"					max="1000" value="" placeholder="USDollars (millions)">			</div>		</div>		<div class="col">			<select class="form-control">				<option value="none" disabled="disabled" selected>--Favorite					Car--</option>				<option value="volvo">Lexus</option>				<option value="saab">Mercedes</option>				<option value="mercedes">Alfa Romeo</option>				<option value="audi">Audi</option>				<option value="audi">BMW</option>				<option value="audi">Bentley</option>			</select>		</div>		<div class="col">			<select class="form-control">				<option value="none" disabled="disabled" selected>--Favorite					Girl--</option>				<option value="volvo">Colombian</option>				<option value="saab">Cuban</option>				<option value="mercedes">Australian</option>				<option value="audi">American</option>			</select>		</div>		<div class="col">			<select class="form-control">				<option value="none" disabled="disabled" selected>--FavoriteDrink--</option>				<option value="volvo">Tequila</option>				<option value="saab">Jack Daniels</option>				<option value="mercedes">Barrosa</option>				<option value="audi">Scotch</option>			</select>		</div>		<div class="col">			Want it all?<br> <input type="radio" name="decision" value="yes">			Yes<br> <input type="radio" name="decision" value="no">			No		</div>	</div><input type="submit" class="btn btn-primary btn-sm" value="Lets Do It !!"><a href="#"	class="btn btn-danger btn-sm delFld"><span class="fas fa-trash-alt"></span>Delete</a></div>';
              let $template = $(template);
              $('.myFields > .form-group').each(function() {
                $('select', this).each(function(index) {
                  const alreadySelected = $(this).val()
                  $sel = $template.find('select').eq(index);
                  $sel.html($sel.children().filter(function() {
                    return $(this).val() != alreadySelected
                  })).val('none');
                });
              });
              $(wrapper).append($template); //add fields
            });
          $(wrapper).on("click", ".delFld", function(e) {
            e.preventDefault();
            $(this).parent('div').remove();
          })
        });
  </script>
  <style>
    .container {
      padding: 15px 10px;
      margin: 15px 15px 15px 10px;
    }
    
    .addNew {
      margin: 0px 0px 0px 15px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="myFields"></div>
    <button id="add_button" class="addNew btn btn-success btn-sm">
    			<span class="fa fa-plus"></span>Add New
    		</button>
  </div>
</body>

</html>

推荐阅读