如何在动态中删除选定的下拉值，用户可以使用 Java 脚本选择或取消选择 HTML

How to remove selected drop down value in dynamically user can select or unselect HTML using Java script?

本文关键字：选择 可以使 用户 Java 脚本 HTML 取消 动态 删除      更新时间：2023-09-26

所选的下拉值已更改。我需要 dto ynamly 选择和取消选择下拉列表。此外，整个值中未选择的 vaules 仅在其他下拉列表中出现。示例代码： $（document）.ready（function （） {

var hideOptions = function () {
    var $select = $('select');
    $select.find('option').show();
    $select.each(function () {
        var $this = $(this);
        var value = $this.val();
        var $options = $this.parents('table').find('select').not(this).find('option');
        var $option = $options.filter('[value="' + value + '"]');
        if (value) {
            $option.hide();
        }
    });
}
hideOptions();
$('select').on('change', function () {
    hideOptions();
});

}）;

<table style="width:40%" class="requiredField">
    <tbody>
        <tr>
            <th>Header</th>
            <th>Mapping</th>
        </tr>
        <tr>
            <td>dropdownA</td>
            <td>
                <select name="email">
                    <option value="">Select</option>
                    <option value="Email_Address">Email_Address</option>
                    <option value="Salutation">Salutation</option>
                    <option value="First_Name">First_Name</option>
                    <option value="Last_Name">Last_Name</option>
                    <option value="Gender">Gender</option>
                    <option value="Company" selected="selected">Company</option>                    
                </select>
            </td>
        </tr>
        <tr>
            <td>dropdownB</td>
            <td>
                <select name="Salutation">
                    <option value="">Select</option>
                    <option value="Email_Address">Email_Address</option>
                    <option value="Salutation">Salutation</option>
                    <option value="First_Name">First_Name</option>
                    <option value="Last_Name">Last_Name</option>
                    <option value="Gender">Gender</option>
                    <option value="Company">Company</option>
                </select>
            </td>
        </tr>       
         <tr>
            <td>dropdownC</td>
            <td>
                <select name="First_Name">
                    <option value="">Select</option>
                    <option value="Email_Address">Email_Address</option>
                    <option value="Salutation">Salutation</option>
                    <option value="First_Name">First_Name</option>
                    <option value="Last_Name" selected="selected">Last_Name</option>
                    <option value="Gender">Gender</option>
                    <option value="Company">Company</option>
                </select>
            </td>
        </tr>
         <tr>
            <td>dropdownD</td>
            <td>
                <select name="Last_Name">
                    <option value="">Select</option>
                    <option value="Email_Address">Email_Address</option>
                    <option value="Salutation">Salutation</option>
                    <option value="First_Name">First_Name</option>
                    <option value="Last_Name">Last_Name</option>
                    <option value="Gender">Gender</option>
                    <option value="Company">Company</option>
                </select>
            </td>
        </tr>
         <tr>
            <td>dropdownE</td>
            <td>
                <select name="Gender">
                    <option value="">Select</option>
                    <option value="Email_Address">Email_Address</option>
                    <option value="Salutation">Salutation</option>
                    <option value="First_Name">First_Name</option>
                    <option value="Last_Name">Last_Name</option>
                    <option value="Gender">Gender</option>
                    <option value="Company">Company</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>dropdownF</td>
            <td>
                <select name="Gender">
                    <option value="">Select</option>
                    <option value="Email_Address">Email_Address</option>
                    <option value="Salutation">Salutation</option>
                    <option value="First_Name">First_Name</option>
                    <option value="Last_Name">Last_Name</option>
                    <option value="Gender">Gender</option>
                    <option value="Company">Company</option>
                </select>
            </td>
        </tr>

    </tbody>
</table>

在以下步骤下执行此操作后，所选下拉值已更改：

  • 从dropdownA -> 公司Email_Address中选择
  • 从dropdownB->公司中选择

现在我们可以看到dropdownA值发生了变化。但我在dropdownA选择了Email_Address.

请纠正我错的地方。下面是一个演示：http://jsfiddle.net/ramalingam07/q8fcrxy9/

在你的代码中：

$(document).ready(function () {
    var hideOptions = function () {
        var $select = $('select');
        $select.find('option').show();
        $select.each(function () {
            var $this = $(this);
            var value = $this.val();
            var $options = $this.parents('table').find('select').not(this).find('option');
            var $option = $options.filter('[value="' + value + '"]');
            if (value) {
                $option.hide();
                $option.each(function () {
                    if (this.defaultSelected) {
                        $(this).parent('select').val('');
                    }
                }, this);
            }
        });
    }
    hideOptions();
    $('select').on('change', function () {
        hideOptions();
    });
});

加载后，它将首先从默认选定项中删除选项。这是通过在 $（'select'）.change 之前隐藏选项来完成的。

但它与 

$option.each(function () {
     if (this.defaultSelected) {
         $(this).parent('select').val('');
      }
}, this);

此代码用于将默认选择值设置为 ''（如果其他人选择它）。由于预删除操作，这永远不会发生，您要么需要删除此部分，要么删除预删除操作，然后它就会起作用。

  1. 删除默认选定
  2. 删除预处理

第一个已经排除了其他选择中已经选择的选项，而第二个仍然是选项，但是当其他选择元素选择该值时，默认选项变为空，选择一个达到您打算执行的操作的选项。

相关文章：