Question

我有两个选择框：client和software/hardware，还有一个多选selectpname，其中放置了software/hardware中选定的产品。根据所选客户端，来自数据库的数据将填充software/hardware。我想避免将相同的产品添加到selectpname，所以我尝试删除所选的选项，但我似乎无法使其正常工作。这些是我尝试过的代码：

$("#selectBox option[value='#selectBox option:selected']").remove(); //trial 1
$("#selectpname option[value='foo']").remove();                      //trial 2
$("#selectpname option:selected").remove();                          //trial 3
$("#selectpname option:selected").each(function () {                 //trial 4
        $(this).remove();
    }
});

我将上面的内容添加到添加按钮：

var num = 1;
function addonprodlist(str, num, location, toFocusDom)
{
    if(str != "")
    {
        if (num == 1) { $("#"+location).append('<option value="' + str + '">' + str + '</option>'); }
        $("#"+toFocusDom).val("");
        $("#"+toFocusDom).focus();
        if (location=='txtsofthard'){
            //code here             
        }
    }               
};

JQUERY :(禁用/启用选择框）

//change in #txtclient will trigger this
$(document).on('change','#txtclient', function() {
    var client = $(this).val();
    if(client != "") {
      $.ajax({
        type: "POST",
        url: "components/comp_include/mainclass.php",
        data: "client=" + client + "&form=chained",
        success:function(response) {
          if(response != '') {
            $("#selectpname").removeAttr('disabled','disabled').html(response);
            //alert(response);
          } 
          else {
            $("#selectpname").attr('disabled','disabled').html("<option value=''>SELECT PRODUCT</option>");
          }
        }
      });
    } 
    else {
      $("#selectpname").attr('disabled','disabled').html("<option value=''>SELECT PRODUCT</option>");
    }

    //other code here       
});

PHP :(填充下拉菜单）

case 'chained':
    if (isset($_POST['client'])) {              
        $qry = //query here
        $res = mysql_query($qry);

        if(mysql_num_rows($res) > 0) {
            $items = [];

            //get all items from database and explode the concat values.
            while($row = mysql_fetch_array($res)) {
                $items = array_merge($items, explode('|', $row[2]));
            }

            //get only the distinct items.
            $items = array_unique($items);

            //remove the emtpy items.
            $items = array_filter($items);

            //initialize the list.
            $list = '<option value="">SELECT PRODUCT</option>';

            //create the list of unique items.
            foreach ($items as $item) {
                $list .= '<option value="'.$item.'">'.$item.'</option>';
            }

            echo $list;
        }
        else if ($_POST['client'] == "SELECT CLIENT") {
            //do nothing / menu would be disabled
        }
        else {
            echo '<option value="">NO RECORD FOUND!</option>';
        }
    } 
break;

HTML：

<select list="pnamelist" name="selectpname" id="selectpname" style="width:345px; height: 30px; overflow: scroll;" disabled="disabled">
    <option>SELECT PRODUCT</option>
</select>
<div class="btn btn-primary btn-small" onclick="addonprodlist($('#selectpname').val(), 1, 'txtsofthard', 'selectpname');" ><center>Add</center></div>

<br>
<select multiple="multiple" id="txtsofthard" name="txtsofthard" onclick='deleteThisSelectedvalue(this.id);' ></select>

我该如何解决这个问题？

Answer 1

我无法指出代码中的确切错误。

但你应该尽量不依赖于＆＃34;选择＆＃34;通过代码选择元素。像这里：

$("#selectpname option:selected").remove();

更好的解决方案是在单击按钮后从所选项目中获取所有需要的信息，然后在代码中使用此信息。因为所选项目可能会在您单击按钮和代码到达删除命令的位置之间发生变化。

另外，尽量不要在html代码中使用onClick，更好的解决方案是将事件注册到元素。

因此，这是一个小型工作示例，其中已向该按钮注册了onClick事件，该事件将读取列表中所选产品的所有数据，并将此数据传递给执行所有所需功能的函数：

＆＃13;

// adds an pruduct to the 'txtsofthard' select box
function addProduct(selectedProductValue, selectedProductName)
{
    $("#txtsofthard").append('<option value="' + selectedProductValue + '">' + selectedProductName + '</option>'); 
    
}

// removes a product from the 'selectpname' select box
function removeProdFromSource(selectedProductValue)
{
	$("#selectpname option[value='"+selectedProductValue+"']").remove();
}

// registers a onClick event to the button
$('#btnAddProduct').on("click", function()
{
  //get the selected item from the 'selectpname' select box
	var selectedProductValue = $('#selectpname').val();
  
  //check if a valid product was selected
  if( selectedProductValue === "SELECT PRODUCT" )
  {
    //do nothing if no product was selected but the button was clicked
    return;
  }
  
  // get the displayed name of the selected product
  var selectedProductName = $("#selectpname option[value='"+selectedProductValue+"']").text();
  
  // add the selected product to the 'txtsofthard' select box
	addProduct(selectedProductValue, selectedProductName);
  
  // remove the selected prudct from the 'selectpname' select box
  removeProdFromSource(selectedProductValue);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectpname">
    <option>SELECT PRODUCT</option>
    <option value="product1">Product 1</option>
    <option value="product2">Product 2</option>
    <option value="product3">Product 3</option>
    <option value="product4">Product 4</option>
</select>

<button id="btnAddProduct">Add</button>

<br>

<select multiple="multiple" id="txtsofthard" name="txtsofthard"></select>

＆＃13;

选择框中的删除选项一旦添加到多个选择按钮单击

1 个答案: