根據下拉列表中的選擇將文本添加到隱藏的輸入值

Question

雖然這看起來很簡單，但我正在努力尋找真正的解決方案。我需要做的是根據選擇的下拉列表將文本添加/附加到隱藏輸入的值。下拉列表中的值將作爲後綴添加/附加到隨機生成的ID中，後綴應該類似於「12345678_myBrand」。這很容易做到，但是當下拉選擇發生變化時，我需要文本（而不是整個值）進行更改，而不是簡單地添加/追加最近選擇的下拉選項。

下面是我在做什麼

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/

很顯然，我不想繼續添加/追加後綴的ID，所以我如何簡單地改變文本而不添加/追加每一個單詞選擇了e選項？

Answer 1

您可以使用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

您可以解析hiddenField值尋找一個下劃線。如果存在，則重新使用該號碼。

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

這是一個Fiddle Demo。