bekommt den Wert eines Dropdown-Menüs mit jQuery

Question

Ich habe ein wenig Drop-Down-Menü zu einer Webseite hinzugefügt:

function addDropDownMenu() { 
     var positionMenu = $(
      "<form class='drop_down_menu'>" + 
       "<select name='roles'>" + 
        "<option value='notSelected'>Not Selected</option>"+ 
        "<option value='relevant'>Relevant</option>"+ 
        "<option value='notRelevant'>Not Relevant</option>" + 
       "</select>" + 
      "</form>"); 

     $('#profile-experience .position').prepend(positionMenu) 
    } 

ich den Wert von entweder Relevant oder Not Relevant zu bekommen versuchen.

Allerdings, wenn ich diesen Code ausführen, bekomme ich immer eine leere Zeichenfolge.

var x = $('.drop_down_menu')[0] 
// x is the form 
$(x).val() 

kehrt ""

Was bin ich? Falsch machen?

Answer 1

Sie können dieses versuchen:

var selectedValue = $('.drop_down_menu>select').val(); 

var selectedValue = $('.drop_down_menu>select').val(); 
 
console.log('The selected value is: '+ selectedValue);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class='drop_down_menu'> 
 
    <select name='roles'> 
 
    <option value='notSelected'>Not Selected</option> 
 
    <option value='relevant' selected>Relevant</option> 
 
    <option value='notRelevant'>Not Relevant</option> 
 
    </select> 
 
</form>

Answer 2

$('.drop_down_menu') Anweisung gibt ein jquery Element mit den Eigenschaften und Methoden, um es entsprechend, aber $('.drop_down_menu')[0] gibt nur den HTMLDOM Element.

Sie müssen die value Eigenschaft verwenden, um die value des ausgewählten Elements zu erhalten.

console.log($('select')[0].value);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name='roles'> 
 
    <option value='notSelected'>Not Selected</option> 
 
    <option value='relevant' selected>Relevant</option> 
 
    <option value='notRelevant'>Not Relevant</option> 
 
    </select>

Ihr Beispiel funktioniert nicht, weil Sie einen Selektor für ausgewähltes Element

var x = $('.drop_down_menu > select')[0] 
 
console.log($(x).val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class='drop_down_menu'> 
 
      <select name='roles'> 
 
       <option value='notSelected'>Not Selected</option> 
 
       <option value='relevant' selected>Relevant</option> 
 
       <option value='notRelevant'>Not Relevant</option> 
 
      </select> 
 
</form>

Answer 3

var _val = $("[name='roles']").val(); 
console.log(_val);