CODEWITHSUNDEEP
jquery
CloudyKooper
CloudyKooper

Reputation: 717

How can I get the selected text from a dropdown list based using it’s index value?

how can I get the selected text from a dropdown list based using it’s index value? Here’s what I’ve been working on for over three hours. I’ve tried various versions of this code.

 $("#saveBtn").click(function () {
         var checked = [];
         var checkedindex = [];
         var theDate = [];
         var inputname = $("input[name='searchString']");
         $("input[name='selectedCourses']").each(function (i) {
             if (this.checked) {
                 checked.push(parseInt($(this).val()));
                 checkedindex.push(parseInt(i));

                 var thedate = $('inputname option:eq(i)').prop('selected', true);

                 alert(checkedindex + thedate.toString());
             }
         });



     });

Is it the way that I’m using this?

   $('inputname option:eq(i)').prop('selected', true);

Please help me with this one. Thanks.

EDIT:

html:

    <select id="searchString" name="searchString">
    <option value="Day" selected="selected">Day</option>
    <option value="Monday">Monday</option>
    <option value="Tuesday">Tuesday</option>
    <option value="Wednesday">Wednesday</option>
    <option value="Thursday">Thursday</option>
    <option value="Friday">Friday</option>
    </select>

I have a number of the same dropdownlists on the page with same id and name.

Upvotes: 1

Views: 207

Answers (4)

Wilmer
Wilmer

Reputation: 2511

Use eq() function then pass your variable, to get the text use text() try:

var thedate = $('#searchString option').eq(i);

thedate.prop('selected', true);

alert(thedate.text());

Upvotes: 0

Jai
Jai

Reputation: 74738

Same id for multiple elements is a issue and browser's stops the lookup when it gets the first id if you have multiple ids.

Yet i see issues in your code is this:

var inputname = $("input[name='searchString']");

In the above selector you have prefixed input while your element is select so that has to be: 

var inputname = $("select[name='searchString']");

and here: 

var thedate = $('inputname option:eq(i)').prop('selected', true);
//--------------^^^^^^^^^^---this is the selector variable and you have used 
//---------------------------as string and in ':eq(i)' i as a string

change to this: 

var thedate = inputname.find('option:eq('+ i +')').prop('selected', true);

how can I get the selected text:

for getting the text:

var thedate = inputname.find('option:eq('+ i +')').prop('selected', true).text();

for getting the value:

var thedate = inputname.find('option:eq('+ i +')').prop('selected', true).val();

And you don't have to do this:

thedate.toString()

because .text() will give you a string.

Upvotes: 1

Oleksii Aza
Oleksii Aza

Reputation: 5398

If you want to select item based on index then yous should concatenate you selector with that index:

$("select option:eq("+ i +")").prop('selected', true);

But what are you trying to achieve with that #saveBtn click handler?

You code so far has several problems:

  1. You shouldn't have several elements on your page with same id.

  2. There is no input with [name='selectedCourses'], so you need to use $("select[name='selectedCourses']")

  3. parseInt($(this).val()). Why are you trying to parse int from string value?
  4. var thedate = $('inputname option:eq(i)').prop('selected', true); alert(checkedindex + thedate.toString()); The thedate variable is jQuery object, so calling .toString() always will return [object Object]

If you are trying to get values of all selects on your page - you should use .val() function (it also works with checkboxes) like this:

$("select[name='selectedCourses']").val()

Upvotes: 0

Muhammad Tahir
Muhammad Tahir

Reputation: 2491

Use this one.

 $("select").on("change",function(){
    alert($(this).val());
 });

you can try it here.

http://jsfiddle.net/q5dYN/

Upvotes: 0

Related Questions