Question

最近我一直在尝试有效地将值解析为<selection>标记。例如，我一直在尝试：

/index.html?exampleId=examplevalue

然而，这似乎并没有起作用。对于添加的上下文，这是一个复制我的<selection>标记结构的示例：

        <form method="GET">
            <select id="CategorySelect" name="CategorySelect">
                <option value="default">Select an Option</option>
                <option value="dogs">Dogs</option>
                <option value="cats">Cats</option>
                <option value="horses">Horses</option>
                <option value="otheranimals">Other animals</option>
            </select>
        </form>

Answer 1

如果我正确理解了您的问题，您就会尝试根据网址的查询字符串预先填写表单输入。

如果是这样，首先需要解析查询字符串。

在这个例子中，我将一个立即调用的函数表达式的结果赋给一个名为position: fixed;的变量（在PHP中用于存储相同信息的变量之后）。

在IIFE内部，我按$_GET或?的所有出现情况拆分查询字符串，然后遍历结果并按&拆分所有非假名项目。我将最终拆分的结果分配给一个对象。

最后将该对象返回=变量。

$_GET

接下来，您需要找到具有正确名称的元素并设置值。所以迭代我们刚刚创建的查询对象;找到所有具有正确名称的元素;迭代元素＆＃39;测试元素标记名称，以便我们知道如何正确设置值。

即使同一页面上有多个具有相似元素的表单，此方法仍然有效。

var $_GET = (function(s,o,a) {
    return s.split(/\?|\&/g).forEach(function(i){i&&(a = i.split('='))&&(o[a[0]] = a[1]);}), o;
    // split the query by ? or &; iterate the results; split each item by =; assign the result; return the object
})(location.search,{},[]);

展开并运行以下演示以查看它的实际效果。

＆＃13;

// Loop through $_GET; Get a list of all nodes, and the value to set
for(var i in $_GET) (function(nodelist, value){
    // Loop through the nodelist
    for(var i in Object.keys(nodelist)) (function(el){
        // If the element is an input element, set it's value
        if(/input/i.test(el.tagName)) el.value = value;
        // If the element is a select element, set the default option
        if(/select/i.test(el.tagName)) el.querySelector('[value="'+value+'"]').selected = true;
    })(nodelist[i]);
})(document.querySelectorAll('[name="'+i+'"]'), $_GET[i]);

＆＃13;

var $_GET = (function(s,o,a) {
    return s.split(/\?|\&/g).forEach(function(i){i&&(a = i.split('='))&&(o[a[0]] = a[1]);}), o;
    // split the query by ? or &; split each item by =; assign the result; return the object
})("?fruit=banana&greeting=evening",{},[]); 
//  ^^ For demo purposes only, use location.search instead.

// Loop through $_GET; Get a list of all nodes, and the value to set
for(var i in $_GET) (function(nodelist, value){
    // Loop through the nodelist
    for(var i in Object.keys(nodelist)) (function(el){
        // If the element is an input element, set it's value
        if(/input/i.test(el.tagName)) el.value = value;
        // If the element is a select element, set the default option
        if(/select/i.test(el.tagName)) el.querySelector('[value="'+value+'"]').selected = true;
    })(nodelist[i]);
})(document.querySelectorAll('[name="'+i+'"]'), $_GET[i]);

＆＃13;

Answer 2

如果您提交表单，您将收到$ _GET中的值（或$ _POST，具体取决于表单方法）

<?php 
if(isset($_GET['CategorySelect'])){ // test if you have submitted something
   echo $_GET['CategorySelect'];
}
?>
<form method="GET">
    <select id="CategorySelect" name="CategorySelect">
        <option value="">Select an Option</option>
        <option value="dogs">Dogs</option>
        <option value="cats">Cats</option>
        <option value="horses">Horses</option>
        <option value="otheranimals">Other animals</option>
    </select>
    <input type="submit" value="submit"><!-- to be able to submit your form -->
</form>

如何通过URL设置下拉菜单的值

2 个答案: