CODEWITHSUNDEEP
javascriptjqueryhtml
Marvzz
Marvzz

Reputation: 1565

recreate an array based on options selected

I need help solving a simple requirement.

<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>

See the HTML above, I want to recreate my array:

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

INTO

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

based on the selected options.

Another thing to note is that I cannot simply change the value of the options of the select box, meaning to say the HTML is somewhat as it is, if it would help, the only part i can restructure on that HTML is the text content between <option></option>

I'm not sure, but I'm already spending a couple of hrs just to solve this problem. Maybe due to my limited jQuery knowledge.

Please help. thanks

Upvotes: 2

Views: 347

Answers (4)

Guffa
Guffa

Reputation: 700730

Get the selected values into an associative array:

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

Then you can replace each place holder in each string in the array with the corresponding value:

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

Demo: jsfiddle.net/C97ma/

Upvotes: 1

jcuenod
jcuenod

Reputation: 58445

To begin with I would change the values in the select box like this:

<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>

Now to update your array:

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);
    }
}

Of course, this could be done better with proper arrays (if you gave your select boxes the same name you could iterate through them using document.getElementsByName()). The basic idea is the replace though which I trust is what you're looking for.

Upvotes: 0

jAndy
jAndy

Reputation: 236142

Based on the information you provided I'm don't get it 100% I guess. But whatever you're trying to do, I guess jQuerys .map() and $.map() would help you here.

Like

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

Demo: http://www.jsfiddle.net/4yUqL/78/

Within the callback you can modify/match the text in any way you want/need. In your case I could imagine you want to use a regular expression to match the selected strings and recreate those somehow.

Upvotes: 1

crowicked
crowicked

Reputation: 579

I figure you're using javascript for combining those (it can be done with PHP also).. You need references to your selects, e.g. :

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

This will assign the 2nd option value from the 'myselect' select element to the variable 'a'

Upvotes: 0

Related Questions