選択したオプションに基づいて配列を再作成

Question

私は簡単な要件を解決するための助けが必要です。

<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-OQ-PR", "def-PR"]; 

INTO

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

を。

もう一つ注目すべきは、選択ボックスのオプションの値を単純に変更することができないということです。つまり、HTMLが多少なりともそのままであるということです。もし役立つならば、HTMLで再構成できる部分​​3210

間違いですが、私はすでにこの問題を解決するために数時間を費やしています。たぶん私の限られたjQueryの知識のためです。

助けてください。ありがとう

Answer 1

連想配列に選択された値を取得します。

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/

Answer 2

私はそれらを組み合わせるためにJavaScriptを使用していることを示しています（PHPでも行うことができます）。 あなたの選択肢への参照が必要です。 ：

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

これは「MySelectと」から2番目のオプションの値が割り当てられますが、あなたが、私はそれを私が推測100％を得ることはありませんよ提供された情報に基づいて変数に「」

Answer 3

を要素を選択します。しかし、何をしようとしていても、私は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/

。あなたの場合、正規表現を使用して選択した文字列に一致させ、何とかそれらを再作成したいと思うかもしれません。

Answer 4

私はこのような選択ボックスの値変更しますまず第一に：あなたの配列を更新するために今すぐ

<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ですが、あなたが探しているものは信頼しています。