JavaScript從多個選擇框中刪除元素

Question

我有一個表單，其中有一個選擇框和一個帶有兩個按鈕和一個文本字段的下拉菜單。 在文本字段中輸入一個項目，該項目將同時添加到上方的選擇框和下拉菜單中。 我可以弄清楚如何從選擇框中刪除選中的項目，但又如何從下拉菜單中刪除呢？

工作JS范例

注意：在實際的表單上，它們將位於不同的選項卡上，因此您將無法同時看到它們，列表僅需從一個區域填充到另一個區域。

的CSS

#sbox {
overflow: hidden;
width: 200px;
}

的HTML

        <select id="sbox" name="selectbox" size="5"></select>
    <BR>
    <button type="button" class="btn btn-default" onclick="DeleteProbs();">Delete Selected Problem</button>
      </td>
  </tr>
<tr>
  <td colspan="2" valign="top"><p>To add a problem to the list, type it in the New Problem text field and then click &quot;Add to List&quot;. To remove a problem, click it in the list, then click, &quot;Delete Selected Problem&quot;<P>
    <strong>New Problem</strong><P>
    <input type="text" id="ProbAreaFrom">
     <P>
    <button type="button" class="btn btn-default" id="ProbListBtn" onclick="ListProbs();">Add to List</button>
    </p>

    Problem being detailed:<BR>
     <select name="select" id="dbox">
     </select>

JAVASCRIPT

function ListProbs() {
var x = document.getElementById("sbox");
    var txt1 = document.getElementById("ProbAreaFrom").value;
    var option = document.createElement("option");
    option.text = txt1
    x.add(option);
     ListProbs2();       
    } 

function ListProbs2() {
var y = document.getElementById("dbox");
    var txt1 = document.getElementById("ProbAreaFrom").value;
    var option = document.createElement("option");
    option.text = txt1
    y.add(option);
    ProbAreaFrom.value="";      
}     

function DeleteProbs() {
var x = document.getElementById("sbox");
for (var i = 0; i < x.options.length; i++) {
    if (x.options[i].selected) {
        x.options[i].remove();
    }
   }
}

Answer 1

工作提琴。 添加了一個按鈕，用於從選擇元素中刪除選擇的項目。 該函數的名稱是

DeleteProbs2

http://jsfiddle.net/4uBYf/2/

   function ListProbs() {
    var x = document.getElementById("sbox");
        var txt1 = document.getElementById("ProbAreaFrom").value;
        var option = document.createElement("option");
        option.text = txt1
        x.add(option);
         ListProbs2();       
    } 

function ListProbs2() {
    var y = document.getElementById("dbox");
        var txt1 = document.getElementById("ProbAreaFrom").value;
        var option = document.createElement("option");
        option.text = txt1
        y.add(option);
        ProbAreaFrom.value="";      
    }     

function DeleteProbs() {
    var x = document.getElementById("sbox");
    for (var i = 0; i < x.options.length; i++) {
        if (x.options[i].selected) {
            x.options[i].remove();
        }
    }
}


function DeleteProbs2() {
    var index = $('#dbox').get(0).selectedIndex;
    $('#dbox option:eq(' + index + ')').remove();

}

html

<div class="table-responsive">
    <table class="table table-bordered">
    <tbody>
    <tr>
      <td  colspan="2" valign="top">
        Problem List:<BR />

        <select id="sbox" name="selectbox" size="5"></select>
        <BR>
        <button type="button" class="btn btn-default" onclick="DeleteProbs();">Delete Selected Problem</button>
          </td>
      </tr>
    <tr>
      <td colspan="2" valign="top"><p>To add a problem to the list, type it in the New Problem text field and then click &quot;Add to List&quot;. To remove a problem, click it in the list, then click, &quot;Delete Selected Problem&quot;<P>
        <strong>New Problem</strong><P>
        <input type="text" id="ProbAreaFrom">
         <P>
        <button type="button" class="btn btn-default" id="ProbListBtn" onclick="ListProbs();">Add to List</button>
        </p>

        Problem being detailed:<BR>
         <select name="select" id="dbox">
         </select>
           <button type="button" class="btn btn-default" id="test" onclick="DeleteProbs2();">remove from select</button>

    </td>
      </tr>
 </tbody>
</table>
</div>

更新您的請求（第一個按鈕從兩個元素中刪除）

http://jsfiddle.net/4uBYf/5/

function DeleteProbs() {
    var x = document.getElementById("sbox");
    for (var i = 0; i < x.options.length; i++) {
        if (x.options[i].selected) {
            var text=$( "#dbox option:selected" ).text();

             $('#dbox option').filter(function () { return $(this).html() == text; }).remove();            
            x.options[i].remove();
        }
    }
}

Answer 2

function DeleteProbs() {
    var x = document.getElementById("sbox");
    var y = document.getElementById("dbox");
    var val;
    for (var i = 0; i < x.options.length; i++) {
        if (x.options[i].selected) {
            val = x.options[i].value;
            x.options[i].remove();
        }
    }
    for (var i = 0; i < y.options.length; i++) {
        if (y.options[i].value == val) {
            y.options[i].remove();
        }
    }
}