Obtenir le texte de l'option sélectionnée avec JavaScript

Question

J'ai une liste déroulante comme celle-ci :

<select id="box1">
<option value="98">dog</option>
<option value="7122">cat</option>
<option value="142">bird</option>
</select>

Comment puis-je obtenir le texte réel de l'option plutôt que sa valeur en utilisant JavaScript ? Je peux obtenir la valeur avec quelque chose comme :

<select id="box1" onChange="myNewFunction(this.selectedIndex);" >

Mais plutôt que de 7122 Je veux cat .

Answer 1

Vous devrez obtenir le innerHTML de l'option, et non sa valeur.

~~

Utilice this.innerHTML au lieu de this.selectedIndex .

~~

Edit : Vous devez d'abord obtenir l'élément option et ensuite utiliser innerHTML.

Utilice this.text au lieu de this.selectedIndex .

Answer 2

 <select class="cS" onChange="fSel2(this.value);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select>

 <select id="iS1" onChange="fSel(options[this.selectedIndex].value);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select><br>

 <select id="iS2" onChange="fSel3(options[this.selectedIndex].text);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select>

 <select id="iS3" onChange="fSel3(options[this.selectedIndex].textContent);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select>

 <select id="iS4" onChange="fSel3(options[this.selectedIndex].label);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select>

 <select id="iS4" onChange="fSel3(options[this.selectedIndex].innerHTML);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select>

 <script type="text/javascript"> "use strict";
   const s=document.querySelector(".cS");

 // options[this.selectedIndex].value
 let fSel = (sIdx) => console.log(sIdx,
     s.options[sIdx].text, s.options[sIdx].textContent, s.options[sIdx].label);

 let fSel2= (sIdx) => { // this.value
     console.log(sIdx, s.options[sIdx].text,
         s.options[sIdx].textContent, s.options[sIdx].label);
 }

 // options[this.selectedIndex].text
 // options[this.selectedIndex].textContent
 // options[this.selectedIndex].label
 // options[this.selectedIndex].innerHTML
 let fSel3= (sIdx) => {
     console.log(sIdx);
 }
 </script> // fSel

Mais :

 <script type="text/javascript"> "use strict";
    const x=document.querySelector(".cS"),
          o=x.options, i=x.selectedIndex;
    console.log(o[i].value,
                o[i].text , o[i].textContent , o[i].label , o[i].innerHTML);
 </script> // .cS"

Et aussi ceci :

 <select id="iSel" size="3">
     <option value="one">Un</option>
     <option value="two">Deux</option>
     <option value="three">Trois</option>
 </select>

 <script type="text/javascript"> "use strict";
    const i=document.getElementById("iSel");
    for(let k=0;k<i.length;k++) {
        if(k == i.selectedIndex) console.log("Selected ".repeat(3));
        console.log(`${Object.entries(i.options)[k][1].value}`+
                    ` => ` +
                    `${Object.entries(i.options)[k][1].innerHTML}`);
        console.log(Object.values(i.options)[k].value ,
                    " => ",
                    Object.values(i.options)[k].innerHTML);
        console.log("=".repeat(25));
    }
 </script>

Answer 3

Vous pouvez obtenir un objet de type tableau qui contient le ou les éléments sélectionnés avec la méthode getSelected() méthode. comme ceci :

querySelector('#box1').getSelected()

afin que vous puissiez extraire le texte avec le .textContent attribut. comme ceci :

querySelector('#box1').getSelected()[0].textContent 

Si vous avez une boîte de sélection multiple, vous pouvez boucler un objet de type tableau. J'espère que cela vous aidera

Answer 4

J'ai simplement copié toutes les "listes de sélection" d'amazon.com, vous pouvez voir la démonstration à partir du lien image.gif suivant.

J'adore le style css et les astuces javascript de amazon.com "select/option"...

essayez-le maintenant....

/***javascript code***/
  document.querySelector("#mySelect").addEventListener("click", () => {
    var x = document.querySelector("#mySelect").selectedIndex;
    let optionText = document.getElementsByTagName("option")[x].innerText;
    document.querySelector(".nav-search-label").innerText = optionText;
  });

/***style.css***/
  .nav-left {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: static;
    float: none;
  }
  .nav-search-scope {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    float: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .nav-search-facade {
    position: relative;
    float: left;
    cursor: default;
    overflow: hidden;
    top: 3px;
  }
  .nav-search-label {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #555;
    font-size: 12px;
    line-height: 33px;
    margin-right: 21px;
    margin-left: 5px;
    min-width: 19px;
  }
  .nav-icon {
    position: absolute;
    top: 14px;
    right: 8px;
    border-style: solid;
    _border-style: dashed;
    border-width: 4px;
    border-color: transparent;
    border-top: 4px solid #666;
    border-bottom-width: 0;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
  }
  .nav-search-dropdown {
    position: absolute;
    display: block;
    top: -1px;
    left: 0;
    height: 35px;
    width: auto;
    font-family: inherit;
    outline: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
    visibility: visible;
    border: 0;
    line-height: 35px;
  }

<!--html code-->
<div class="nav-left">
  <div id="nav-search-dropdown-card">
    <div class="nav-search-scope nav-sprite">
      <div class="nav-search-facade">
        <span class="nav-search-label" style="width: auto">All</span>
        <i class="nav-icon"></i>
      </div>

      <select
        id="mySelect"
        class="nav-search-dropdown searchSelect"
        style="display: block; top: 3px"
        tabindex="0"
        title="Search in"
      >
        <option>All Departments</option>
        <option>Arts &amp; Crafts</option>
        <option>Automotive</option>
        <option>Baby</option>
        <option>Beauty &amp; Personal Care</option>
        <option>Books</option>
        <option>Computers</option>
        <option>Digital Music</option>
        <option>Electronics</option>
        <option>Kindle Store</option>
        <option>Prime Video</option>
        <option>Women's Fashion</option>
        <option>Men's Fashion</option>
        <option>Girls' Fashion</option>
        <option>Boys' Fashion</option>
        <option>Deals</option>
        <option>Health &amp; Household</option>
        <option>Home &amp; Kitchen</option>
        <option>Industrial &amp; Scientific</option>
        <option>Luggage</option>
        <option>Movies &amp; TV</option>
        <option>Music, CDs &amp; Vinyl</option>
        <option>Pet Supplies</option>
        <option>Software</option>
        <option>Sports &amp; Outdoors</option>
        <option>Tools &amp; Home Improvement</option>
        <option>Toys &amp; Games</option>
        <option>Video Games</option>
      </select>
    </div>
  </div>
</div>

Answer 5

Var selectionlist=document.getElementById("agents") ; td2.innerHTML = selectionlist.children[selectionlist.selectedIndex].innerHTML ;