Comment sélectionner l'option d'autosélection en fonction de la valeur de l'entrée

Question

J'ai besoin que l'option de sélection soit sélectionnée sur document prêt en fonction de la valeur d'une entrée.

Exemple:

<select id="mySelect"> 
<option value="1">myVal1</option> 
<option value="2">myVal2</option> 
</select> 

<input type="text" id="myId" value="2"> 

Par exemple, nous avons une valeur prédéfinie '2' de l'entrée sur le chargement de la page. J'ai besoin de select-box pour être auto-sélectionné avec son option ayant la même valeur que l'entrée 'myId'. Je veux dire 'mayVal1' doit être sélectionné.

Lorsque l'entrée n'a aucune valeur, la sélection doit se comporter par défaut.

Merci!

Answer 1

Votre mention "sur le document prêt" suggère sorte de que vous pourriez utiliser jQuery, avec cette hypothèse fait (quoique peut-être par erreur), je vous offre ceci:

$(document).ready(
    function(){ 
     var theValue = $('#myId').val(); 
     $('option[value=' + theValue + ']') 
      .attr('selected',true); 
    }); 

With a demo at JS Fiddle.

---

Edité en réponse à la question de l'OP:

Comment la valeur de ce que je compare option de premier mot de la valeur de l'entrée? Je veux dire que si j'ai la valeur d'option 'bonjour' et que la valeur d'entrée 'bonjour monde' script doit sélectionner l'option contenant 'bonjour' dans sa valeur.

Juste, étant donné la disparité entre votre exemple affiché et votre question, je vais essayer d'aborder les deux possibilités.

D'abord, pour sélectionner une option en fonction de son texte composant (dans votre code ci-dessus, le 'myVal1', 'bits myVal2'):

$(document).ready(
    function() { 
     $('form:eq(0)').submit(
      function() { 
       var theValue = $('#myId').val().split(" ",1); 
       $('option:contains(' + theValue + ')').attr('selected', true); 
       return false; 
      }); 
    }); 

JS Fiddle demo: Notez que le composant texte de la option élément ne pas représentent la valeur de l'élément option.

Deuxièmement, si vous voulez lier la première partie de la valeur entrée dans l'élément d'entrée myId à la valeur du select/élément option (s):

$(document).ready(
    function() { 
     $('form:eq(0)').submit(
      function() { 
       var theValue = $('#myId').val().split(" ",1); 
       $('option[value=' + theValue + ']').attr('selected', true); 
       return false; 
      }); 
    }); 

JS Fiddle demo.

Ces démos pourraient travailler avec keyup(), ou des actions/événements équivalents, mais submit() semblait le meilleur choix.

Answer 2

à JS vanille:

var listener = function(ev){ 
var input = document.getElementById('myId'); 
for(var i = 0, elems = document.getElementById('mySelect'), l = elems.length; i < l; i++) 
    elems[i].selected = elems[i].value == input.value;  
} 
listener(); 
document.getElementById('myId').addEventListener('change', listener, false); 

avec jQuery:

$(function(){ 
    $('#myId').change(function(){ 
     $('#mySelect option').removeAttr('selected').filter('[value=' + $(this).val() + ']').attr('selected', true); 
    }).change() 
}) 

Answer 3

quelque chose comme ci-dessous devrait fonctionner ///

<select> 
    <option value="0">One</option> 
    <option value="1">Two</option> 
</select> 

$(document).ready(
    var inputValue = $('#id').val(); 
    $('select').val('1'); // selects "Two" 
    $('select').val(inputValue); // also selects "Two" 

});