web-dev-qa-db-fra.com

Modifier la valeur de la zone de texte en fonction de l'entrée sélectionnée avec l'attribut sélectionné

J'essaie de modifier la valeur d'une entrée de texte en fonction du choix de l'utilisateur d'une valeur à partir d'un menu déroulant. Je l'ai obtenu en utilisant ce qui suit,

<script type="text/javascript">  
     $(document).ready(function() {                                       
        $("#name").live("change", function() {
          $("#firstname").val($(this).find("option:selected").attr("value"));
        })
     });                                     
</script>

<select id="name" name="name"> 
<option value="">Please select...</option> 
<option value="Elvis">Elvis</option> 
<option value="Frank">Frank</option> 
<option value="Jim">Jim</option> 
</select>

<input type="text" id="firstname" name="firstname" value="" readonly="readonly">

Tout cela fonctionne bien. Ce que j'essaie de faire maintenant, c'est que l'élément présélectionné soit affiché par défaut lorsque l'utilisateur revisite le formulaire s'il souhaite modifier son choix. Pour le moment, la sélection par défaut est simplement «Veuillez sélectionner ...». Est-ce qu'ils doivent quand même forcer la sélection à afficher la valeur de la saisie de texte lors du chargement de la page?

Merci

Chris

jqueryjquery-selectors
10
user1098178

Essaye ça,

$(document).ready(function() {

    $("#name option").filter(function() {
        return $(this).val() == $("#firstname").val();
    }).attr('selected', true);

    $("#name").live("change", function() {

        $("#firstname").val($(this).find("option:selected").attr("value"));
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<select id="name" name="name"> 
<option value="">Please select...</option> 
<option value="Elvis">Elvis</option> 
<option value="Frank">Frank</option> 
<option value="Jim">Jim</option> 
</select>

<input type="text" id="firstname" name="firstname" value="Elvis" readonly="readonly">

10
Adil
$(document).ready(function() {   

  $(document).on("change", "#name", function() {

     $("#firstname").val( this.value ); // this.value is enough for you

  }).val( $('#firstname').val() ).change(); // for pre-selection trigger

});

Remarque

Au lieu de .live(), utilisez .on() avec jQuery 1.7+, car live() est obsolète.

La syntaxe de .on() pour la gestion des événements délégués est la suivante:

$(StaticParent).on( eventName, target, handlerFunction );

Où StaticParent désigne le conteneur parent non dynamique de l'élément target sur lequel vous souhaitez lier un événement. 

Ainsi, dans le cas ci-dessus, il serait préférable d’utiliser un parent statique de #name au lieu de document.

2
thecodeparadox

Essayez celui-ci: http://jsfiddle.net/ufomammut66/mw4dY/

Fondamentalement, je sélectionne simplement une option en fonction de la valeur, la définit comme étant sélectionnée, puis appelle l'événement change. Votre événement de changement prend en charge le reste.

$(document).ready(function() {                                       
  $("#name").live("change", function() {
    $("#firstname").val($(this).find("option:selected").attr("value"));
  });
  $('#name option[value=Frank]').attr('selected','selected').change();
});
1
ShortRound1911
$(document).ready(function() {                                       
    $("#name").live("change", function() {
      $("#firstname").val($(this).val());
    })
 }); ​
1
Ümit KOL

Collez ce code sur $(document).ready 

$("#name").val($("#firstname").val());
0
rahul
$('#name').val($('#firstname').val());
0
Pedro Estrada

Pour mémoriser les valeurs de formulaire, vous pouvez utiliser fonctions de cookie :

$(document).ready(function() {
    var value = readCookie('fname');
    if (value) {
        $("#firstname").val(value);
        $('#name option[value="'+value+'"]').prop('selected', true);
    }
    $("#name").on("change", function() {
        var value = $(this).find("option:selected").attr("value");
        $("#firstname").val(value);
        createCookie('fname',value,31);
    });
});

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

jsfiddle - si vous revenez sur cette page, le nom sera redéfini comme sur la page suivante.

0
Stano