4
votes

jQuery .val () ne renvoie pas la valeur d'une balise d'option

J'ai du code html généré par JavaScript. Le JavaScript génère les éléments (option) dans une liste déroulante (sélectionnez). Je veux ensuite obtenir la valeur de l'option sélectionnée '1', mais à la place 'test' est renvoyé.

Le html est généré en utilisant:

var siteId = $('#siteID').val(); // returns 'test'
var siteId2 = $('#siteID').data("value"); // returns undefined
var siteId3 = $('#siteID').attr("value"); // returns undefined
var siteId4 = $('#siteID').prop("value"); // returns 'test'

J'ai alors essayé les méthodes suivantes pour obtenir la valeur de l'option sélectionnée:

var newSelect = document.createElement('option');
selectHTML = "<option value=\"" + 1 + "\">" + test + "</option>";
newSelect.innerHTML = selectHTML;
document.getElementById('siteID').add(newSelect);

javascript jquery html html-select

1 commentaires

utilisez jquery, pour ex- $ ('# example'). append ('');

5 Réponses :

2
votes

Vous utilisez une manière très étrange de créer votre option - vous créez une option, puis insérez une chaîne d'option en tant que innerHTML

Code fixe (voir l'exemple plus tard)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="siteID">
</select>

De plus, vous ne sélectionnez pas réellement l'option, donc la valeur sera celle que le navigateur pense être sélectionnée

Pourquoi ne pas utiliser jQuery?

var opt = document.createElement('option');
opt.value=1;
opt.text="test"
document.getElementById('siteID').appendChild(opt);

console.log(document.getElementById('siteID').value, $('#siteID').val())
console.log(document.getElementById('siteID').outerHTML)

<select id="siteID">
</select>

Votre code:

var test ="Test";
var newSelect = document.createElement('option'),
   selectHTML = "<option value=\"" + 1 + "\">" + test + "</option>";
newSelect.innerHTML = selectHTML;
document.getElementById('siteID').add(newSelect);
console.log(document.getElementById('siteID').outerHTML)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="siteID1">
  <option value="">Please select</option>
</select>

Votre code FIXE

$("<option />", { value: 1, text: "test" }).appendTo('#siteID1')
$('#siteID1').prop("selectedIndex", 1); // NOW the value is 1

console.log(
  $('#siteID1').val()
)

var opt = document.createElement('option');
opt.value=1;
opt.text="test"
document.getElementById('siteID').appendChild(opt);

0 commentaires

2
votes

Vous avez créé l'option newSelect puis vous essayez d'insérer une option à l'intérieur de celle-ci avec innerHTML qui est l'endroit où vous vous êtes trompé.
C'est ce que vous auriez dû faire.

var newSelect = document.createElement('option');
newSelect.innerHTML = 'test';
newSelect.value= '1';
document.getElementById('siteID').add(newSelect);

0 commentaires

-1
votes

Vous pouvez d'abord créer la balise Select, puis essayer d'ajouter la balise option. J'ai joint le code comme ci-dessous:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Dropdowm:<div id='test'></div>

// create the select tag and append with the main div tag
var string = '<select id="dropdown_tag"></select>';
$("#test").append(string);

// create as many option you want and append with the select tag
var newSelect = document.createElement('option');
selectHTML = "<option>---select---</option>";
selectHTML += "<option value='1'>1</option>";
selectHTML += "<option value='2'>2</option>";
$("#dropdown_tag").append(selectHTML);

// Onchange event of dropdown tag
$(document).on('change',"#dropdown_tag", function()
{
  alert($(this).val());
});

0 commentaires

0
votes

Veuillez essayer ceci

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="siteID"></select>

var test = 'test';
selectHTML = "<option value=\"" + 1 + "\">" + test + "</option>";
$("#siteID").append(selectHTML);

var siteId = $('#siteID').val(); 
console.log(siteId);

0 commentaires

1
votes

Vous devez supprimer // selectHTML = "";

Et passer à newSelect. value = 1; pour ajouter de la valeur à l'option par javascript

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='siteID'>
</select>

var newSelect = document.createElement('option');
var test = 'test';
//selectHTML = "<option value=" + 1 + ">" + test + "</option>";
newSelect.innerHTML = test;
newSelect.value = 1;
document.getElementById('siteID').appendChild(newSelect);

$(document).ready(function(){
var siteId = $('#siteID').val(); // r
console.log(siteId);
});

newSelect.innerHTML = test;
newSelect.value = 1;

0 commentaires