Question

我是javascript的新手，需要帮助才能想出这个。

我有三个菜单供您选择和选项，您选择的每个菜单都会显示一行数据。在每行（即3行选择3行）中，您可以选择另一个选择菜单来选择该产品的提供者。我创建了另一个选择您选择默认提供程序的选项，并且更改了行中的其他菜单。我遇到的问题是它们都具有相同的id，因为当你选择一个函数时会调用一个函数。我尝试遍历所有选择，并从那些选择id = x更改选定选项，但仅适用于找到该ID的第一个选择

echo" function pickprovider($name, $idname){ \n";

echo" <select name='$name' id='idname'> \n";
echo" <option>1stprovider </option> \n";
echo"  <option>2ndprovider </option>\n";
echo " </select>\n";
echo" }\n";

echo" function defaultprovider($name, $idname) {\n";
echo" <select name='$name' id='idname' onchange='changeDflt(this);'> \n";
echo " <option>1stprovider </option> \n";
echo " <option>2ndprovider </option> \n";
echo "</select>\n";
echo" }\n";

 echo "<script type='text/javascript'>\n";
 echo "function ChangeDflt(list) { \n";
 echo "var x = list.options[list.selectedIndex].text;\n";
 echo "var allSelects = document.getElementsByTagName('select');\n";
 echo "for (var i = 0; i < allSelects.length; i++) { \n";
 ....
 change selected options for selects 
 echo "}\n";
 echo "}\n";
 echo "</script<\n";

我不知道如何在每次调用函数时更改函数以创建唯一的id。 ....当我获得页面中的所有选择元素时，我可以使用“div”标签吗？

Answer 1

我不确定你要用select元素完成什么，但是如果你构建PHP以不同方式发出HTML和JavaScript，那么它既易于阅读又更容易编写HTML和你的JavaScript。

<?php
    $base_id = "mySelect";      // set the string used as the basis for ids
    $base_name = $base_id;      // set the string used as the basis for names. There's no reason it cannot be the same as the id.

    $select_id = $base_id;      // set a variable to use for the id of the select
    $select_name = $base_name;  // set a variable to use for the name of the select

    // start a loop to emit the select elements
    for ($i = 0; $i < 3; $i++) {
        $select_id = $base_id.$i;       // set the id of the select to the base concatentated with the incrementer variable
        $select_name = $base_name.$i;   // same for the name. Variable value will be substituted on emission.
        echo "
<select name=\"$select_name\" id=\"$select_id\" onchange=\"changeDefault(this);\">
    <option value=\"0\">1st provider</option>
    <option value=\"1\">2nd provider</option>
</select>
";
    }
    // emit the JavaScript
    echo "
<script type='text/javascript'>
var changeDefault = function changeDefault(list) {
    var val = list.options[list.selectedIndex].value,           // get the value of the selected option
        allSelects = document.getElementsByTagName('select'),   // get the rest of the selects
        options = null,                                         // placeholder for option elements
        i = 0,                                                  // incrementer 1
        j = 0;                                                  // incrementer 2
    // change selected options for selects
    for (i = 0; i < allSelects.length; i += 1) {
        // get all option elements that are children of the select element
        options = allSelects[i].getElementsByTagName('option');
        // loop through the option elements
        for (j = 0; j < options.length; j += 1) {
            // set selected to true if the values match and false if they do not
            options[j].selected = options[j].value === val;
        }
    }
};
</script>
    ";
?>

那就是说，语法结构如：

function defaultprovider($name, $idname) {
<select name='$name' id='idname' onchange='changeDflt(this);'>
 <option>1stprovider </option>
 <option>2ndprovider </option>
</select>
}

是完全无效的JavaScript代码，无法运行。您可能想查看有关JavaScript的教程。我推荐这个：http://www.hunlock.com/blogs/Essential_Javascript_--_A_Javascript_Tutorial。它从基础开始，并且比我更好地解释JavaScript。

更改具有相同ID的页面中所有其他选择菜单的选项

1 个答案: