使用jQuery检测列表框中的值

Question

I have a dropdown box (Sub District) and a "listbox_source" (villages). I prepare value for the dropdown and listbox from sql server and listbox's values depend on drop down, dynamic.

Then, I have another "listbox_destination" for moving selected village from "listbox_source". I've done for moving value from listbox_source to listbox_destination .

but, then, there is questions,

1. how do I know if listbox_destination still empty or has values ?
2. how do I know if there is no double value in listbox_destination when Sub District dropdown was selected for the second time and with the same value ?

Please, advice...

I try give an example of my code: Dropdown:

<select id="ID_Villages" size="10" multiple="">
<option value="42">Bandul</option>
<option value="43">Dedap</option>
<option value="44">Mekar Delima</option>
<option value="45">Putri Puyu</option>
<option value="46">Tanjung Padang</option>
<option value="47">Tanjung Pisang</option>
<option value="187">Kudap</option>
<option value="188">Selat Akar</option>
<option value="189">Mengkopot</option>
<option value="190">Mengkirau</option>


$(document).ready(function (e) {
    $('#btn_To_Right').click(function (e) {
        var selectedList = $('#ID_Villages  option:selected').toArray();

        if ($('selectedList').length == 0) {
            alert("Nothing to move.");
            e.preventDefault();

        } else {
            <!-- #1. how to check listbox_destination still empty or has values ? -->

            $(selectedVillage).append($(selectedList).clone());
            $(selectedList).remove();
            alert(selectedVillage.length);

            } else {
                <!-- #2. how to avoid double values -->    
                $each(selectedList, function (index, value) {
                    if($selectedVillage ??? ).length == 0){

                        <!-- add new value -->

                    } else {
                        alert ("data already exist");
                    }

                }
            }
        }
    })
})

UPDATE for first moving ( #1 ), from listbox_source to listox_destination , I check listox_destination by using

if ($("#lst_ID_Desa_Selected option").length == 0) {
    $(selectedVillage).append($(selectedList).clone());
    $(selectedList).remove();
}

and then for double values protection ( #2 )

$.each(selectedList, function (index, value) { 
    alert($("selectedList option[value='" + 42 + "']").length);
    alert($("selectedList option[value='" + value.value + "']"));
    alert($("selectedList <option value='" + value.value + "'>"));

})

---

I tried to get value from

alert($("selectedList option[value='" + value + "']").length);

by using alert but popup value appears "0". Whereas, selectedList is the source data of villages.

---

I tried to get value from

alert($("selectedList option[value='" + value.value + "']"));

by using alert and the return value as [object Object]

---

while I tried to get value from

alert($("selectedList <option value='" + value.value + "'>"));

there is error message:

syntax error, unrecognized expression: selectedList <option value='42'>

---

I think, I have to check selectList syntax before I use it for if under $.each syntax.

Please, I need further advice for this JS/jQuery syntax.

Answer 1

To find whether list is empty or not, is can be done using the following code after $(selectedList).remove();

$("#ID_Villages option").length;   //If 0 then no options in the select list

To check for duplicates, you can use something like:

$("selectedDesa option[value='42']").length;  

If the value of above is 0 then no option found in the destination list. If the length is 1 then option already exists. You can replace the value attribute based on the selected option value from the source list.

Update:

There is no need to loop. You can use the logic as below:

var selectedList = $('#ID_Villages  option:selected').toArray();
var selectedVal = $('#ID_Villages  option:selected').val(); // New code

Then while checking for duplicates, use the below:

$("selectedDesa option[value='" + selectedVal + "']").length;