How i can get the value string from a drop down list

Question

please how i can get correctly the value from the drop down list, i have used django-widget-tweaks library .

this is the code of the field dropdown list that i want to get the value string from it:

<p >{{ form.category_column.label_tag }}</p>
<p id="category_column_id">{% render_field form.category_column  autocomplete="off" hx-get="/sizescolumn/" hx-target="#id_sizes_column" %}</p>

I have tried to got the value using javascript by this line of code :

var select = document.getElementById('category_column_id').value;

PS: I want to get the value string of this field(dropdown list) to compare it with another value string.

---->but it doesn't work. thanks in advance.

Answer 1

To get the string value of the selected item user .innerHTML instead of .value

var select = document.getElementById("yourId").innerHTML;

Answer 2

You have added the id attribute id="category_column_id" to the <p> tag.

Particular id attributes should only be used once on a page as Ids are unique (as opposed to classes). If your select attribute has the same id, ie, 'category_column_id' then the <p> tag will probably be found first and used by your javascript. A <p> tag doesn't have a value the way a select column does, so your javascript is not returning anything.

First, doublecheck on your page what your select element ID is, and then use your javascript to assess the value. There's nothing particularly wrong with your javascript itself in modern browsers so long as you have the correct id and there is only one of that particular id.

Answer 3

Thanks for everyone here Fixed like this:

        var select = $('#id_category_column').find(":selected").text();
       

I hope it will help someone in future.