Modifier la valeur de la zone de texte en fonction de L'entrée Select avec L'attribut Selected

j'essaie de changer la valeur d'une entrée de texte basée sur le fait que l'utilisateur sélectionne une valeur à partir d'un pulldown. J'ai eu de travail à l'aide de la suivante,

<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 très bien. Ce que j'essaie de faire maintenant, c'est que l'élément présélectionné affiche par défaut lorsque l'utilisateur revoit le formulaire s'il souhaite modifier son choix. Au moment où le select juste par défaut à ' S'il vous plaît sélectionner...'. Est-ce qu'ils sont de toute façon de forcer le select à afficher la valeur de la saisie de texte lorsque le le chargement de la page?

Merci

Chris

10
demandé sur user1098178 2012-08-07 17:58:41

7 réponses

Essayez ceci,

$(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
répondu Adil 2016-08-07 22:35:08 
$(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() utiliser .on() avec jQuery 1.7+, parce que live() est obsolète.

Syntaxe .on() pour déléguer la gestion des événements est le suivant:

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

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

Donc, pour le cas ci-dessus, il serait préférable d'utiliser de l'électricité statique parent d' #name au lieu de document.

2
répondu thecodeparadox 2012-08-07 14:16:36 
$(document).ready(function() {                                       
    $("#name").live("change", function() {
      $("#firstname").val($(this).val());
    })
 }); ​
1
répondu Ümit KOL 2012-08-07 14:09:14

essayez celle-ci: http://jsfiddle.net/ufomammut66/mw4dY/

En Gros onload je sélectionne juste une option par la valeur, la mettant à selected puis appelant l'événement de changement. Votre événement de changement s'occupe du 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
répondu ShortRound1911 2017-04-02 05:26:27

Coller ce code sur $(document).ready

$("#name").val($("#firstname").val());
0
répondu rahul 2012-08-07 14:21:25 
$('#name').val($('#firstname').val());
0
répondu Pedro Estrada 2012-08-07 14:24:10

Pour rappeler les valeurs d'un formulaire, vous pouvez utiliser fonctions des cookies:

$(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 revisitez cette page, le nom sera mis en arrière comme sur le congé de la page.

0
répondu Stano 2012-08-07 14:40:10