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

Question

Selected dropdown values are changed. I need dto ynamically select and unselect the dropdown. Also unselected vaules from whole values only comes in other dropdown. Sample code : $(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>

Selected dropdown value changed after make this below the steps:

• select from dropdownA -> Company into Email_Address
• select from dropdownB -> Company

Now we can see the dropdownA values are changed. But I am choosing Email_Address in dropdownA .

Please correct me where I am wrong. Here's a demo: http://jsfiddle.net/ramalingam07/q8fcrxy9/

Answer 1

In you code:

$(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();
    });
});

After loaded, it'll first remove options from default selected items. Which is done by hideOptions before the $('select').change....

But it conflicts with

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

This codes is used to set defaultselected value to '' if other choose it. Which will never happen due to the pre-remove action, you either need to remove this part, or remove the pre-remove action, then it'll work.

1. Remove the defaultSelected
2. Remove preprocess

First one has already excluded the already selected options pop in other select, while the second remain the option, but when the value is selected by other select element, the default one becomes empty, choose one that hit what you intended to do.