更改表单选择上的样式表 onChange="change()"

Posted 2023-02-24

【中文标题】更改表单选择上的样式表 onChange="change()"

【英文标题】：Change stylesheet on form selection onChange="change()"

【发布时间】：2018-02-13 10:27:39

【问题描述】：

所以我试图让我的样式表在用户选择表单中的下拉框时更改为不同的下拉框。

我的代码如下。

$styles = array(
    "style",
    "dark"
);

$style = $_POST["style"];

if (!in_array($style, $styles))

     //we default back to the first in the array, this prevents accidental hardcoding;
     $style = $styles[0]; 


$css = "/templates/streamer/css/$style.css";

if (!file_exists($css))
    //something terrible happend;
    #echo "missing style $css";


function showOptions() 
    echo '<form id="selectStyle" action="#" method="post">';
    echo '<select id="style" onChange="change()">';

    global $styles;

    foreach ($styles as &$value)
        echo '<option value="'.$value.'">'.$value.'</option>';
    

    echo '</select></form>';

那么我的链接rel如下：

<link rel="stylesheet" href="<?php echo $css; ?>"/>

然后我调用jquery脚本：

function change() 
    document.getElementById("selectStyle").submit();

然后我调用函数来显示表单：

<?php showOptions(); echo $css; ?>

所以我的问题是，一旦我选择“深色”css 文件，页面就会刷新并且不会更改样式表。

我还尝试了许多其他替代方法，但它们也不起作用。但是我写的这个方法似乎是更适合我需要的选择。

谢谢

【问题讨论】：

我需要更改样式表，你说的选项和方法不是我需要的。不过谢谢

表单提交后页面刷新？还是在活动之后onChange？

从你的 PHP 中分离你的 html，当你可以关闭 PHP 标记时，不需要echo 它。这样更容易阅读和理解。

你能证明change()函数在做什么吗？也许问题就在那里。既然你没有提交按钮，那是我的猜测。

@hassan - 当我在下拉框中选择深色时，它会刷新。表单没有提交按钮。

【参考方案1】：

我认为你在 PHP 和 javascript 之间混用

这里：

echo '<select id="style" onChange="change()">';

您需要使用 PHP 为 contact 指定一个name 属性-可以这么说-

所以这需要改为：

echo '<select name="style" onChange="change()">';

【讨论】：

哇哈哈，我很生气，只是那个“名字”导致了这个问题。非常感谢您的帮助 :) 非常感谢 :)

【参考方案2】：

对于遇到类似问题的其他人，再次感谢 @hassan 的帮助。

我现在刚刚编辑了表单并为函数添加了回显：

function showOptions() 
    echo '<form id="selectStyle" action="#" method="post">';
    echo '<select name="style" onChange="change()">';
    echo '<option disabled selected value> -- select a style -- </option>';
    global $styles;

foreach ($styles as &$value)
    echo '<option value="'.$value.'">'.$value.'</option>';
    
    echo '</select></form>';

所以我添加的行是选择样式的额外选项：

echo '<option disabled selected value> -- select a style -- </option>';

所以现在这让我可以在我的 2 种风格之间切换。我将添加更多样式供您选择。但需要先让它工作，然后才能制作其他样式文件。

再次感谢大家的帮助和哈桑的回答:)