Définir l'option de sélection 'sélectionnée', par valeur
J'ai un champ select avec quelques options. Maintenant, je dois sélectionner l’un de ces options avec jQuery. Mais comment puis-je faire cela quand je ne connais que la value de la option à sélectionner?
J'ai le code HTML suivant:
<div class="id_100">
<select>
<option value="val1">Val 1</option>
<option value="val2">Val 2</option>
<option value="val3">Val 3</option>
</select>
</div>
Je dois sélectionner l'option avec la valeur val2. Comment cela peut-il être fait?
Voici une page de démonstration: http://jsfiddle.net/9Stxb/
Il existe un moyen plus simple qui ne vous oblige pas à entrer dans la balise options:
$("div.id_100 select").val("val2");
Découvrez la méthode this jQuery .
Pour sélectionner une option avec la valeur 'val2':
$('.id_100 option[value=val2]').attr('selected','selected');
Utilisez l'événement change() après avoir sélectionné la valeur. De la docs:
Si le champ perd le focus sans que le contenu ait changé, l'événement n'est pas déclenché. Pour déclencher l'événement manuellement, appliquez
.change()sans arguments:
$("#select_id").val("val2").change();
Plus d'informations à l'adresse .change ().
Désélectionnez tout d'abord et filtrez les options sélectionnables:
$('.id_100 option')
.removeAttr('selected')
.filter('[value=val1]')
.attr('selected', true)
<select name="contribution_status_id" id="contribution_status_id" class="form-select">
<option value="1">Completed</option>
<option value="2">Pending</option>
<option value="3">Cancelled</option>
<option value="4">Failed</option>
<option value="5">In Progress</option>
<option value="6">Overdue</option>
<option value="7">Refunded</option>
Définition du statut en attente par valeur
$('#contribution_status_id').val("2");
Pour moi les suivants ont fait le travail
$("div.id_100").val("val2").change();
Je pense que le moyen le plus simple est de sélectionner val (), mais vous pouvez vérifier les éléments suivants. Voir Comment gérer les balises select et option dans jQuery? pour plus de détails sur les options.
$('div.id_100 option[value="val2"]').prop("selected", true);
$('id_100').val('val2');
Pas optimisé, mais la logique suivante est également utile dans certains cas.
$('.id_100 option').each(function() {
if($(this).val() == 'val2') {
$(this).prop("selected", true);
}
});
Vous pouvez sélectionner n'importe quel attribut et sa valeur à l'aide du sélecteur d'attributs [attributename=optionalvalue]. Vous pouvez donc sélectionner l'option et définir l'attribut sélectionné.
$("div.id_100 > select > option[value=" + value + "]").prop("selected",true);
Où value est la valeur que vous souhaitez sélectionner.
Si vous devez supprimer des valeurs sélectionnées précédemment, comme cela serait le cas si vous l'utilisez plusieurs fois, vous devrez le modifier légèrement afin de supprimer en premier l'attribut sélectionné
$("div.id_100 option:selected").prop("selected",false);
$("div.id_100 option[value=" + value + "]")
.prop("selected",true);
une réponse simple est: at html
<select name="ukuran" id="idUkuran">
<option value="1000">pilih ukuran</option>
<option value="11">M</option>
<option value="12">L</option>
<option value="13">XL</option>
</select>
sur jquery, appelez la fonction ci-dessous par un bouton ou
$('#idUkuran').val(11).change();
c’est simple et à 100%, c’est tiré de mon travail.
Le moyen le plus simple de le faire est:
HTML
<select name="dept">
<option value="">Which department does this doctor belong to?</option>
<option value="1">Orthopaedics</option>
<option value="2">Pathology</option>
<option value="3">ENT</option>
</select>
jQuery
$('select[name="dept"]').val('3');
Sortie: Ceci activeraENT.
Utilisation:
$("div.id_100 > select > option[value=" + value + "]").attr("selected",true);
Cela fonctionne pour moi. J'utilise ce code pour analyser une valeur dans un formulaire de mise à jour de fancybox. Mon source complète depuis app.js est:
jQuery(".fancybox-btn-upd").click(function(){
var ebid = jQuery(this).val();
jQuery.ajax({
type: "POST",
url: js_base_url+"manajemen_cms/get_ebook_data",
data: {ebookid:ebid},
success: function(transport){
var re = jQuery.parseJSON(transport);
jQuery("#upd-kategori option[value="+re['kategori']+"]").attr('selected',true);
document.getElementById("upd-nama").setAttribute('value',re['judul']);
document.getElementById("upd-penerbit").setAttribute('value',re['penerbit']);
document.getElementById("upd-tahun").setAttribute('value',re['terbit']);
document.getElementById("upd-halaman").setAttribute('value',re['halaman']);
document.getElementById("upd-bahasa").setAttribute('value',re['bahasa']);
var content = jQuery("#fancybox-form-upd").html();
jQuery.fancybox({
type: 'ajax',
prevEffect: 'none',
nextEffect: 'none',
closeBtn: true,
content: content,
helpers: {
title: {
type: 'inside'
}
}
});
}
});
});
Et mon code PHP est:
function get_ebook_data()
{
$ebkid = $this->input->post('ebookid');
$rs = $this->mod_manajemen->get_ebook_detail($ebkid);
$hasil['id'] = $ebkid;
foreach ($rs as $row) {
$hasil['judul'] = $row->ebook_judul;
$hasil['kategori'] = $row->ebook_cat_id;
$hasil['penerbit'] = $row->ebook_penerbit;
$hasil['terbit'] = $row->ebook_terbit;
$hasil['halaman'] = $row->ebook_halaman;
$hasil['bahasa'] = $row->ebook_bahasa;
$hasil['format'] = $row->ebook_format;
}
$this->output->set_output(json_encode($hasil));
}
var opt = new Option(name, id);
$("#selectboxName").append(opt);
opt.setAttribute("selected","selected");
Il n'y a aucune raison de penser à cela, tout ce que vous faites est d'accéder et de définir une propriété. C'est tout.
Ok, donc quelques bases de base: Si vous faisiez cela en JavaScript, vous le feriez:
window.document.getElementById('my_stuff').selectedIndex = 4;
Mais vous ne le faites pas avec JavaScript, mais avec jQuery. Et dans jQuery, vous voulez utiliser la fonction .prop () pour définir une propriété, vous le feriez comme ceci:
$("#my_stuff").prop('selectedIndex', 4);
Quoi qu'il en soit, assurez-vous que votre identifiant est unique. Sinon, vous allez vous cogner la tête contre le mur en vous demandant pourquoi cela n'a pas fonctionné.
.attr () ne fonctionne parfois pas dans les anciennes versions de jQuery, mais vous pouvez utiliser .prop () :
$('select#ddlCountry option').each(function () {
if ($(this).text().toLowerCase() == co.toLowerCase()) {
$(this).prop('selected','selected');
return;
}
});
Cela fonctionne à coup sûr pour Sélectionnez Contrôle :
$('select#ddlCountry option').each(function () {
if ($(this).text().toLowerCase() == co.toLowerCase()) {
this.selected = true;
return;
} });
Est vieux post, mais voici une fonction simple qui agissent comme un plugin jQuery.
$.fn.selectOption = function(val){
this.val(val)
.find('option')
.removeAttr('selected')
.parent()
.find('option[value="'+ val +'"]')
.attr('selected', 'selected')
.parent()
.trigger('change');
return this;
};
Vous pouvez simplement faire quelque chose comme ça:
$('.id_100').selectOption('val2');
Pourquoi utiliser cela parce que vous changez le satemant sélectionné en DOM, ce qui est pris en charge par crossbrowser et vous déclencherez un changement afin que vous puissiez le récupérer.
Est fondamentalement la simulation de l'action humaine.
Il suffit de mettre dans ce code:
$("#Controls_ID").val(value);
Essaye ça. JavaScript simple mais efficace + jQuery le combo fatal.
SelectComponent:
<select id="YourSelectComponentID">
<option value="0">Apple</option>
<option value="2">Banana</option>
<option value="3">Cat</option>
<option value="4">Dolphin</option>
</select>
Sélection:
document.getElementById("YourSelectComponentID").value = 4;
Maintenant, votre option 4 sera sélectionnée. Vous pouvez faire cela pour sélectionner les valeurs au démarrage par défaut.
$(function(){
document.getElementById("YourSelectComponentID").value = 4;
});
ou créez une fonction simple, mettez la ligne dedans et appelez la fonction sur anyEvent pour sélectionner l'option
Un mélange de jQuery + javaScript fait la magie ....
- Vous devez prendre en compte la valeur que vous souhaitez modifier de manière dynamique, elle doit être identique à celle présente dans les options que vous définissez dans votre code HTML, car elle est
case sensative. Vous pouvez modifier votre zone de sélection dynamiquement comme suit,
$("div#YOUR_ID").val(VALUE_CHANGED).change();
//value must present in options you selected otherwise it will not work
Un problème que j'ai rencontré lorsque la valeur est un ID et le texte est un code. Vous ne pouvez pas définir la valeur à l'aide du code, mais vous n'avez pas d'accès direct à l'ID.
var value;
$("#selectorId > option").each(function () {
if ("SOMECODE" === $(this).text()) {
value = $(this).val();
}
});
... Do work here...
Ça marche bien
jQuery('.id_100').change(function(){
var value = jQuery('.id_100').val(); //it gets you the value of selected option
console.log(value); // you can see your sected values in console, Eg 1,2,3
});
Le meilleur moyen est comme ça:
$(`#YourSelect option[value='${YourValue}']`).prop('selected', true);
Il semble y avoir un problème avec les contrôles de liste déroulante de sélection qui ne changent pas de façon dynamique lorsque les contrôles sont créés de manière dynamique au lieu d'être dans une page HTML statique.
Dans jQuery cette solution a fonctionné pour moi.
$('#editAddMake').val(result.data.make_id);
$('#editAddMake').selectmenu('refresh');
Tout comme un addenda, la première ligne de code sans la deuxième ligne fonctionnait de manière transparente: l'extraction de l'index sélectionné était correcte après la définition de l'index et si vous cliquez sur le contrôle, le bon élément sera affiché, mais cela ne reflétera dans l'étiquette supérieure du contrôle.
J'espère que cela t'aides.