2 Dropdrows with same id

Question

I have 2 dropdowns with same id on each select tag , something like this :

dropdown 1:

<select class="form-control" data-val="true" data-val-number="The field Id must be a number. id="Id" name="Id">...</select>

dropdown 2 :

<select class="form-control" id="Id" name="Id"><option value="21">Pre-Production</option>
<option value="18">In Viability Test </option>
</select>

Right now im calling the Ids like this way:

$(document).ready(function () {
$("#Id").change(function () {
...  $("#Id").empty();  ...

This is how the both dropdowns are generated in html:

div class="card-body">
                    <form action="#">
                        <div class="form-group-feedback form-group-feedback-left"">
                            @Html.DropDownListFor(model => model.Class1.OfType<Class1>().FirstOrDefault().Id, Model.SelectedListClass1, new { @class = "form-control" })
                        </div>
                    </form>
                </div>

div class="card-body">
                    <form action="#">
                        <div class="form-group-feedback form-group-feedback-left"">
                            @Html.DropDownListFor(model => model.Class2.OfType<Class2>().FirstOrDefault().Id, Model.SelectedListClass2, new { @class = "form-control" })
                        </div>
                    </form>
                </div>

The problem is that #Id from first and form other dropdown have same #id (select#Id-form-control).

I would like to know how can i distinct those ids using jquery.

You shouldn't have two elements with the same ids. IDs should be unique — Manav, Jul 04 '19 at 14:35
You can add a class to distinct them. but you don't need two id to be the same — Bosco, Jul 04 '19 at 14:35
@Bosco i have same ids because im calling them from collections from one model, and the id of those collections types are named Id. — Pedro Mendes, Jul 04 '19 at 14:40
@PedroMendes then you may need to change something as duplicate ids means your html is invalid — Pete, Jul 04 '19 at 14:42
Possible duplicate of [div class vs id](https://stackoverflow.com/questions/84378/div-class-vs-id) — MauriceNino, Jul 04 '19 at 14:46
Id is like your last resort of identification, you either use class, name, id, tag name to identify an element. Since you have exhausted tag type, id and name, that is why I suggest using class to differentiate them. basically this class is not doing anything. like others said the Id being same is an invalid `Html`. If you can show your collection, the we can know the better way to implementing generating you html — Bosco, Jul 04 '19 at 15:09
@bosco can i have some practical exemple of using class instead id? Aditionally i have updated my question with html code that is generating Id = id. — Pedro Mendes, Jul 04 '19 at 15:30
Can you show `Class1` and `Class2`? but at the point where you have class you can do `@class = "form-control class_one"`, also `class_two`. But since you have two classes you can still use id — Bosco, Jul 04 '19 at 15:36
@Bosco thx, that should fix my problem , but instead naming the class i will change the id names like ...@class = "form-control", id = "Class1Id" and "Class2Id".... Once again thx for the solution ;). — Pedro Mendes, Jul 04 '19 at 15:51

score 0 · Accepted Answer · answered Jul 04 '19 at 14:37

0

Whatever you are doing with 'Id' should be done through 'class' or 'className' in react, because 'id' is supposed to be unique for every tag.

answered Jul 04 '19 at 14:37

Saad Zafar

238
3
8

2 Dropdrows with same id

1 Answers1