javascripthtmljqueryselectlist

How to get element based on their innerHTML


I have a for loop where I am iterating over array selected items. I want to get the element from select list where my value is equal with innerText of select list. How I can do that using jQuery ?

I have tried this, but got stuck

 var selectedClubs = $('#select2-3 option:selected');
               
    console.log(selectedClubs[0].innerText);

    for (let i = 0; i < selectedClubs.length; i++) {
        if (selectedClubs[i].innerText == value) {
        var c = $("#select2-3 option:contains(" + selectedClubs[i].innerText + "')");
        console.log(c.innerText);
      }
    }

Solution

  • You don't need the loop if you're using :contains:

    var selectedClub = $(`#select2-3 option:selected:contains("${value}")`);
    

    Alternatively you can use filter():

    var selectedClubs = $('#select2-3 option:selected');
    var selectedClub = $selectedClubs.filter((i, el) => el.innerText === value);