Hinzufügen von Text zu einem versteckten Eingabewert basierend auf der Auswahl aus Dropdown

Question

Obwohl dies einfach scheint, habe ich Mühe, eine echte Lösung zu finden. Was ich tun muss, ist das Hinzufügen/Anhängen von Text an den Wert einer versteckten Eingabe basierend auf der Auswahl eines Dropdown-Menüs. Der Wert in der Dropdownliste wird zu einer zufällig generierten ID als Suffix hinzugefügt/angehängt, das wie folgt aussehen sollte: "12345678_myBrand". Dies ist sehr einfach zu tun, aber ich brauche den Text (nicht den gesamten Wert) zu ändern, wenn die Dropdown-Auswahl ändert, anstatt einfach die zuletzt ausgewählte Dropdown-Option hinzuzufügen/anzuhängen. Hier

ist, was ich tue

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/

Offensichtlich will ich nicht, um das Hinzufügen/das Anhängen suffix an die id so wie ändere ich einfach den text ohne hinzufügen/anfügen jedes singl e Option ausgewählt ???

Answer 1

können Sie split verwenden:

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

Sie den Wert Hidden analysieren kann für einen Unterstrich zu suchen. Wenn einer existiert, dann benutze diese Nummer wieder.

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

Hier ist ein Fiddle Demo.