如何使用javascript删除我的选项？

Question

早上好的程序员。我用html创建了一个表单。当用户根据该号码选择人数时，大部分年龄和名称框将同时打开我有一个链接删除该框。

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>

输出：当我选择人数2时，那么2个名称框和2个年龄框将随删除链接一起出现

问题：问题是当我点击删除第一个选项的链接时，它不仅会删除第一个选项，而且会删除第二个选项。怎么避免这个？

提前谢谢。

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

代码中的两个基本错误： 你忘记添加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函数而不是单击/更改/模糊。

Answer 5

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

  $("#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

你走了。在StackOverflow 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>