Ajouter du texte à la valeur d'entrée cachée basée sur la sélection de la liste déroulante

Question

Bien que cela semble simple, j'ai du mal à trouver une vraie solution. Ce que je dois faire est d'ajouter/ajouter du texte à la valeur d'une entrée cachée basée sur la sélection d'une liste déroulante. La valeur dans la liste déroulante sera ajoutée/ajoutée à un ID généré aléatoirement en tant que suffixe qui devrait ressembler à ceci "12345678_myBrand". C'est très facile à faire, MAIS j'ai besoin que le texte (pas toute la valeur) change lorsque la sélection de la liste déroulante change plutôt que d'ajouter/d'ajouter simplement l'option de liste déroulante la plus récemment sélectionnée.

Voici ce que je fais

HTML:

<input id="myHiddenField" type="text"> 
<select id="brand"> 
    <option value="">Please Select</option> 
    <option value="First Choice">First Choice</option> 
    <option value="Second Choice">Second Choice</option> 
    <option value="Third Choice">Third Choice</option> 
    <option value="Fourth Choice">Fourth Choice</option> 
</select> 

jQuery:

jQuery(document).ready(function() { 
    var brand = $('#brand'); 
    var hiddenField = $('#myHiddenField'); 
    hiddenField.val(1 + Math.floor(Math.random() * 10000000)); 

    brand.change(function() { 

     hiddenField.val(hiddenField.val() + "_" + brand.val()); 

    }); 
}); 

https://jsfiddle.net/wo6a5nkf/2/

Évidemment, je ne veux pas continuer à ajouter/la annexant suffixe à l'id alors comment puis-je simplement changer le texte sans ajouter/ajouter chaque singl e option sélectionnée ???

Answer 1

Vous pouvez utiliser split:

jQuery(document).ready(function() { 
 
\t var brand = $('#brand'); 
 
    var hiddenField = $('#myHiddenField'); 
 
    hiddenField.val(1 + Math.floor(Math.random() * 10000000)); 
 
    
 
    brand.change(function() { 
 
    
 
    \t hiddenField.val(hiddenField.val().split('_')[0] + "_" + brand.val()); 
 
    
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input id="myHiddenField" type="text"> 
 
<select id="brand"> 
 
<option value="">Please Select</option> 
 
<option value="First Choice">First Choice</option> 
 
<option value="Second Choice">Second Choice</option> 
 
<option value="Third Choice">Third Choice</option> 
 
<option value="Fourth Choice">Fourth Choice</option> 
 
</select>

Answer 2

Vous pouvez analyser la valeur de hiddenField pour chercher un trait de soulignement. S'il en existe un, réutilisez ce numéro.

brand.change(function() { 
    var parsedHiddenField = hiddenField.val().split('_'); 
    if (parsedHiddenField.length > 0) { 
     hiddenField.val(parsedHiddenField[0] + "_" + brand.val()); 
    } 
    }); 

Voici un Fiddle Demo.