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-{myop1}-{myop2}", "def-{myop2}"];

INTO

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

基于所选的选项。

需要注意的另一件事是我不能简单地改变选择框的选项的值，这意味着HTML有点像它，如果它会有所帮助，我可以重新构建的唯一部分HTML是<option></option>

之间的文字内容

我不确定，但我已经花了几个小时才解决这个问题。也许是由于我有限的jQuery知识。

请帮忙。感谢

Answer 1

根据您提供的信息，我猜不到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/

在回调中，您可以按照您想要/需要的任何方式修改/匹配文本。在你的情况下，我可以想象你想使用正则表达式匹配选定的字符串并以某种方式重新创建它们。

Answer 2

将选定的值转换为关联数组：

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 3

我认为你正在使用javascript来组合它们（它也可以用PHP完成）.. 您需要引用您的选择，例如：

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

这会将'myselect'select元素中的第二个选项值分配给变量'a'

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虽然我相信你正在寻找的东西。

根据选定的选项重新创建数组

4 个答案: