How to change HTML select option items using javascript

Question

I have a form and user will select city. When the user selects the city, the town list will change to bring it to the cities of the towns.

I want to delete the towns of non-selected cities.

I have a code but it does not work :

       <div class="form-group">
            <label for="city">City :</label>
            <select name="city" id="city" class="form-control" required onchange="townChange()">
                @foreach (var cityItem in Model.cityList)
                {
                    <option value="@cityItem.Id">@cityItem.Name</option>
                }
            </select>
        </div>
        <div class="form-group">
            <label for="town">Town :</label>
            <select name="town" id="town" class="form-control" required>
                @foreach (var townItem in Model.townList)
                {
                    <option value="@townItem.Id" accesskey="@townItem.CityId">@townItem.Name</option>
                }
            </select>
        </div>

function townChange()
{
    var cityId = document.getElementById("city").value;
    var townlist = document.getElementById("town");
    for (var i = 0; i < townlist.length; i++) {
        if (townlist.options[i].accessKey == cityId)
            townlist.remove(i);
    }
}

You should not try to loop townlist-variable since it only contains the town select-element. Try loopin through the townlist.options instead. — Esko
– Esko, Commented Jun 22, 2017 at 12:35
But this is the example of deletion w3schools.com/jsref/met_select_remove.asp. @Esko — D.Dirik
– D.Dirik, Commented Jun 22, 2017 at 12:43
Possible duplicate of HTML select dropdownlist with javascript function — VDWWD
– VDWWD, Commented Jun 22, 2017 at 12:54

user8180740 · Accepted Answer · 2017-06-22 12:42:25Z

0

You tagged jquery but you are not actually using jquery in your code.

If you are willing to try jquery, something like this should work, but I am unable to test at the moment:

$('#town option').each(function () {
  if ($(this).prop('accesskey') !== cityId) {
    $(this).remove();
  }
});

answered Jun 22, 2017 at 12:42

user8180740

Sign up to request clarification or add additional context in comments.

Comments

Riaz Laskar · Accepted Answer · 2017-06-22 12:47:40Z

0

document.getElementById("town") you were looping with this which is the element itself u need to loop through the options of the select element. Try this function

function townChange()
{
    var cityId = document.getElementById("city").value;
    var townlist = document.getElementById("town");
    var options = townlist.options;
    for (var i = 0; i < options.length; i++) {
        if (townlist.options[i].accessKey != cityId)
        {
            townlist.remove(i);
        }
    }
}

answered Jun 22, 2017 at 12:47

Riaz Laskar

1,3229 silver badges17 bronze badges

6 Comments

D.Dirik Over a year ago

This method works a bit, but does not delete all of the things that need to be deleted. @Riaz

Riaz Laskar Over a year ago

@D.Dirik i deleted all options which dosent matches the townlist.accessKey with the selected cityId . is the logic correct ?

Riaz Laskar Over a year ago

since u said "I want to delete the towns of non-selected cities" ? so i did that , i gusess the logic is correct.

D.Dirik Over a year ago

The logic is correct but unfortunately it does not work exactly. @Riaz-laskar

Riaz Laskar Over a year ago

@D.Dirik ok so whats the issue can u elaborate a little plz

|

Ayaz · Accepted Answer · 2017-06-22 12:59:42Z

0

Replace your loop with this.

for (var i = 0; i < townlist.length; i++) { if (townlist.options[i].accesskey == cityId) townlist.remove(i); }

edited Jun 22, 2017 at 12:59

answered Jun 22, 2017 at 12:44

Ayaz

2,1314 gold badges17 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to change HTML select option items using javascript

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related