根據選擇的選項重新創建陣列

我需要幫助來解決一個簡單的需求。根據選擇的選項重新創建陣列

<select id="my-select1"> 
    <option value="1">This is option 1 ({myop1}|OP)</option> 
    <option value="2" selected>This is option 2 ({myop1}|OQ)</option> 
    <option value="3">This is option 3 ({myop1}|OR)</option> 
</select> 
<select id="my-select2"> 
    <option value="1">This is option 1 ({myop2}|PP)</option> 
    <option value="2">This is option 2 ({myop2}|PQ)</option> 
    <option value="3" selected>This is option 3 ({myop2}|PR)</option> 
</select> 
<select id="my-select3"> 
    <option value="1">This is option 1 ({myop3}|QP)</option> 
    <option value="2">This is option 2 ({myop3}|QQ)</option> 
    <option value="3" selected>This is option 3 ({myop3}|QR)</option> 
</select>

查看HTML以上，我想我的重新排列：根據所選的選項

combo = ["abc-{myop1}-{myop2}", "def-{myop2}"];

INTO

combo = ["abc-OQ-PR", "def-PR"];

。

要注意的另一件事是，我不能簡單地改變選擇框的選項的值，這意味着HTML是有點像它，如果它會幫助，唯一的部分我可以在該HTML重構是之間的文字內容3210

我不知道，但我已經花了幾個小時只是爲了解決這個問題。也許是由於我有限的jQuery知識。

請幫忙。謝謝

來源

2011-01-20 Marvzz

所以`abc- {myop1} - {myop2}`是一種模板，您想從選擇框中「插入」值？ – 2011-01-20 08:14:51

是的，新陣列將基於選擇框中的選擇。 – Marvzz 2011-01-20 08:19:40

獲取所選擇的值到關聯數組：

var pattern = {}; 
var s = $('select option:selected').each(function(){ 
    var m = /\((.*?)\|(.*)\)/.exec($(this).text()); 
    pattern[m[1]] = m[2]; 
});

然後可以替換每個佔位符在每個字符串與相應的值的陣列中：

combo = $.map(combo, function(e){ 
    return e.replace(/\{.*?\}/g, function(m){ 
     return pattern[m]; 
    }); 
});

演示：jsfiddle.net/C97ma/

來源

2011-01-20 08:37:56 Guffa

我想你正在使用javascript來組合這些（它也可以用PHP來完成）.. 你需要引用你的選擇，例如，：

<script type="text/javascript"> 
    a=document.getElementById("myselect").options[1]; 
</script>

這將從「myselect」指定第二個選項值選擇元素的變量a

來源

2011-01-20 08:25:42 crowicked

根據您所提供的信息，我不明白100％我猜。但無論你想要做什麼，我想jQuerys .map()和$.map()會幫助你在這裏。

像

var arr = $('select').find('option:selected').map(function(index, elem) { 
    return elem.textContent || elem.text; 
}).get();

演示：http://www.jsfiddle.net/4yUqL/78/

內回調可以修改/匹配任何你想要的/需要的文本。在你的情況下，我可以想象你想用一個正則表達式來匹配選定的字符串並以某種方式重新創建它們。

來源

2011-01-20 08:26:18 jAndy

首先，我首先會改變選擇框中的值是這樣的：

<select id="my-select1"> 
    <option value="OP">This is option 1 ({myop1}|OP)</option> 
    <option value="OQ" selected>This is option 2 ({myop1}|OQ)</option> 
    <option value="OR">This is option 3 ({myop1}|OR)</option> 
</select> 
<select id="my-select2"> 
    <option value="PP">This is option 1 ({myop2}|PP)</option> 
    <option value="PQ">This is option 2 ({myop2}|PQ)</option> 
    <option value="PR" selected>This is option 3 ({myop2}|PR)</option> 
</select> 
<select id="my-select3"> 
    <option value="QP">This is option 1 ({myop3}|QP)</option> 
    <option value="QQ">This is option 2 ({myop3}|QQ)</option> 
    <option value="QR" selected>This is option 3 ({myop3}|QR)</option> 
</select>

現在更新您的數組：

var comboDef = ["abc-{myop1}-{myop2}", "def-{myop2}"]; 
var combo = ["abc-{myop1}-{myop2}", "def-{myop2}"]; 

function updateArray() { 
    combo = comboDef; 
    for (i in combo) 
    { 
     combo[i] = combo[i].replace("{myop1}",document.getElementById("my-select1").value); 
     combo[i] = combo[i].replace("{myop2}",document.getElementById("my-select2").value); 
     combo[i] = combo[i].replace("{myop3}",document.getElementById("my-select3").value); 
    } 
}

當然可以這樣做適當陣列更好（如果你給你的選擇框使用document.getElementsByName()可以迭代它們）。基本的想法是replace，儘管我相信你在找什麼。

來源

2011-01-20 08:33:07 jcuenod

根據選擇的選項重新創建陣列

回答

相關問題