如何使用 java 脚本删除我的选项？

Question

嗨，程序员们，早上好。我使用 html 创建了一个表格。当用户 select 根据该人数的人数时，年龄和姓名框的大部分将同时打开，我有一个 link 来删除那些框。

html 代码是：

<div class="selectContainer">
    <label for="name">Number Of Person:</label>
    <select id="ddTest" name="no_person">
        <option value="">- Select -</option>
        <option value="Option1">1</option>
        <option value="Option2">2</option>
        <option value="Option3">3</option>
    </select>
</div>

<div class="hidden isOption1">
    <a href="#" class="remove" rel="Option1">remove</a>
    <label>Name</label>
    <input type="text" name="name" >
    <label>Age</label>
    <input type="text" name="age" >
</div>
<div class="hidden isOption2">
    <a href="#" class="remove" rel="Option2">remove</a>
    <label>Name</label>
    <input type="text" name="name" >
    <label>Age</label>
    <input type="text" name="age" >
    <br>
    <a href="#" class="remove" rel="Option2">remove</a>
    <label>Name</label>
    <input type="text" name="name" >
    <label>Age</label>
    <input type="text" name="age" >
</div>
    <div class="hidden isOption3">
         <a href="#" class="remove" rel="Option3">remove</a>

         <label>Name</label>
         <input type="text" name="name" >
         <label>Age</label>
         <input type="text" name="age" >
         <br>
         <label>Name</label>
         <input type="text" name="name" >
         <label>Age</label>
         <input type="text" name="age" >
         <br>

         <label>Name</label>
         <input type="text" name="name" >
         <label>Age</label>
         <input type="text" name="age" >
        </div>

脚本是

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#ddTest").change(function() {         
        var value = $("#ddTest option:selected").val();
        if (value === '') return;
        var theDiv = $(".is" + value);

        //displays the selected option div
        theDiv.slideDown().removeClass("hidden");

        //disbales the selected option
        $("#ddTest option:selected").attr('disabled','disabled');
            $(this).val('');
        });  

        $("div a.remove").click(function () {
            var value = $(this).attr('rel');
            var theDiv = $(".is" + value);
            //enables the disabled option
            $("#ddTest option[value=" + value + "]").removeAttr('disabled');
            //hides the selected option div
            $(this).parent().slideUp(function() { $(this).addClass("hidden"); });
        });
    });
</script>

输出：当我 select 人数 2 时，2 个姓名框和 2 个年龄框将随删除一起出现 link

问题：问题是当我单击第一个选项的删除 link 时，它不仅会删除第一个选项，还会删除第二个选项。如何避免这种情况？

提前谢谢你。

Answer 1

您的 HTML 似乎有一些问题。我编辑了以下内容，它按预期工作：

<div class="selectContainer">
    <label for="name">Number Of Person:</label>
    <select id="ddTest" name="no_person">
        <option value="">- Select -</option>
        <option value="Option1">1</option>
        <option value="Option2">2</option>
        <option value="Option3">3</option>
    </select>
</div>

<div class="hidden isOption1">
    <a href="#" class="remove" rel="Option1">remove</a>
    <label>Name</label>
    <input type="text" name="name" >
    <label>Age</label>
    <input type="text" name="age" >
</div>
<div class="hidden isOption2">
    <a href="#" class="remove" rel="Option2">remove</a>
    <label>Name</label>
    <input type="text" name="name" >
    <label>Age</label>
    <input type="text" name="age" >
</div>
<div class="hidden isOption3">
    <a href="#" class="remove" rel="Option3">remove</a>
    <label>Name</label>
    <input type="text" name="name" >
    <label>Age</label>
    <input type="text" name="age" >
</div>

Answer 2

这是一个简单的 Javascript 解决方案：-

<script>
    function Option1() {
    var name = document.getElementById("ddTest");
    if (name.length > 0) {
        name.remove(name.length-1);
    }
}
function Option2() {
    var age = document.getElementById("ddTest");
    if (age.length > 0) {
        age.remove(age.length-1);
    }
 }
</script>

别忘了加上这个：-

<form>
<select id="ddTest" size="4">
  <option>name</option>
  <option>age</option>
</select>
</form>

<button onclick="Option1()">Remove</button>
<button onclick="Option2()">Remove</button>

Answer 3

您的代码中有两个基本错误： 1. 你忘了加 div 2. 您提到选项 3 两次，单击一次即可删除第二个和第三个选项

Answer 4

您应该在 Jquery 中生成 Select 框。即

HTML_option1 = '<a href="#" class="remove" rel="Option2">remove</a>
    <label>Name</label>
    <input type="text" name="name" >
    <label>Age</label>
    <input type="text" name="age" >';

HTML_option2 = ' <a href="#" class="remove" rel="Option2">remove</a>
    <label>Name</label>
    <input type="text" name="name" >
    <label>Age</label>
         <input type="text" name="age" >
         </div>';

$("#ddTest").change(function(){         

value = $(this).val();
for(int i = 0; i < value; i++)
{
  HTML_option1 += HTML_option1;
  HTML_option2 += HTML_option2;
}

$("#Youroption1_id").html(HTML_option1);
$("#Youroption1_id").slideDown();
$("#Youroption2_id").html(HTML_option2);
$("#Youroption2_id").slideDown();

 });

确保在动态添加的 HTML 上应用 Jquery 时，您应该使用 .live 函数而不是 click/change/blur。

Answer 5

您需要按照 applejack 的建议修改 DOM 或将点击事件修改为：

  $("#ddTest").change(function() {         
    var value = $("#ddTest option:selected").val();
    if (value === '') return;
    var theDiv = $(".is" + value);

    //displays the selected option div
    theDiv.slideDown().removeClass("hidden");

    //disbales the selected option
    $("#ddTest option:selected").attr('disabled','disabled');
        $(this).val('');
    });  

    $("div a.remove").click(function () {
        var value = $(this).attr('rel');
        var theDiv = $(".is" + value);
        //enables the disabled option
        $("#ddTest option[value=" + value + "]").removeAttr('disabled');
        //hides the selected option div

     $(this).nextUntil('br').addBack().slideUp(function() { $(this).addClass("hidden"); });
    });

Working Demo

Answer 6

您的 HTML 代码中有一个小问题。

在您的 HTML 代码中，第二个和第三个输入被放在一个 DIV 下。

<div class="hidden isOption2">
<a href="#" class="remove" rel="Option2">remove</a>
<label>Name</label>
<input type="text" name="name" >
<label>Age</label>
<input type="text" name="age" >
<br>
<a href="#" class="remove" rel="Option2">remove</a>
<label>Name</label>
<input type="text" name="name" >
<label>Age</label>
<input type="text" name="age" >

在你的 JavaScript 中，你编码了这个

$("div a.remove").click(function () {
//......
$(this).parent().slideUp(function() { $(this).addClass("hidden"); });
}

本例中的 $(this).parent() 指的是 a 标签的父元素，因此在本例中，包含两个输入字段的整个 div 标签将被删除，并且还有 2 个输入字段。

您可以更改 HTML 代码以添加另一个 div 以将它们分开

 <div class="hidden isOption2">
<a href="#" class="remove" rel="Option2">remove</a>
<label>Name</label>
<input type="text" name="name" >
<label>Age</label>
<input type="text" name="age" >
</div>
<div class="hidden isOption3">
<br>
<a href="#" class="remove" rel="Option2">remove</a>
<label>Name</label>
<input type="text" name="name" >
<label>Age</label>
<input type="text" name="age" >

Answer 7

给你。在 Whosebug fiddler 中对其进行了测试，它有效：

HTML:

  <div class="selectContainer">
    <label for="name">Number Of Person:</label>
    <select id="ddTest" name="no_person">
      <option value="">- Select -</option>
      <option value="Option1">1</option>
      <option value="Option2">2</option>
      <option value="Option3">3</option>
    </select>
  </div>

  <div class="hidden isOption1">
    <a href="#" class="remove" rel="Option1">remove</a>
    <label>Name</label>
    <input type="text" name="name">
    <label>Age</label>
    <input type="text" name="age">
  </div>
  <div class="hidden isOption2">
    <a href="#" class="remove" rel="Option2">remove</a>
    <label>Name</label>
    <input type="text" name="name">
    <label>Age</label>
    <input type="text" name="age">
    <br>
  </div>
  <div class="hidden isOption3">
    <a href="#" class="remove" rel="Option3">remove</a>
    <label>Name</label>
    <input type="text" name="name">
    <label>Age</label>
    <input type="text" name="age">
  </div>

Javascript:

  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#ddTest").change(function() {
        var value = $("#ddTest option:selected").val();
        if (value === '') {
          return;
        }
        var theDiv = $(".is" + value);

        //displays the selected option div
        theDiv.slideDown().removeClass("hidden");

        //disables the selected option
        $("#ddTest option:selected").attr('disabled', 'disabled');
        $(this).val('');
      });

      $("div a.remove").click(function() {
        var value = $(this).attr('rel');
        var theDiv = $(".is" + value);
        //enables the disabled option
        $("#ddTest option[value=" + value + "]").removeAttr('disabled');
        //hides the selected option div
        $(this).parent().slideUp(function() {
          $(this).addClass("hidden");
        });
      });
    });
  </script>
</body>

</html>

如何使用 java 脚本删除我的选项？

how to remove my option using java script?

html

javascript

jquery