Question

<div id="colourSelector" class="row">
<input id="backgroundcolor" name="backgroundcolor" size="6" maxlength="6" type="color" style="display: block;">

</div>

<div id="lineHeight" class="row">
<select name="lineHeight" id="lineHeightSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>

<div id="divlineDemo" class="section row">
<hr id="lineDemo" style="<?=$model->css_style?>" />

</div>

<script type="text/javascript">

$(function() {
var colorPicker = $('#backgroundcolor');
var headline = $('#lineDemo');
var lineHeight = $('#lineHeightSelect');

lineHeight.on("change", function(){
    headline.css("height", $(this).val() + "px");
});

colorPicker.on("change", function() {
    headline.css('backgroundColor', $(this).val());
});

});


</script>

我现在要做的是获取$ model-＆gt; css_style：

的属性

身高：5px; background-color：rgb（0,253,255）; 并将它们作为backgroundcolor元素的默认值（background-color：rgb（0,253,255））和lineHeight（height：5px） - ＆gt; 5它必须是此下拉列表的默认选项。

我确信必须有一些选择，但我不知道怎么做......

此外，我想通过ajax将lineDemo的样式的最终值带到数据库字段。

提前致谢。

Answer 1

不完全确定$ model-＆gt; css_style是什么，我认为在您的代码中不需要它。如果要为此下拉列表设置默认值，也许可以使用localstorage而不是数据库？如果您需要本地计算机以外的人访问它，您只需要一个数据库，但我认为本地存储可能就足够了。

以下代码基本上是您所做的，只是添加了一些功能。当用户更改其中一个值时，脚本会记住它。当用户刷新页面时，保存的值将被设置为颜色和下拉列表的起始选项。

https://jsfiddle.net/domslee/pfsv24yz/2/

HTML：

<div id="colourSelector" class="row">
<input id="backgroundcolor" name="backgroundcolor" size="6" maxlength="6" type="color" style="display: block;">

</div>

<div id="lineHeight" class="row">
<select name="lineHeight" id="lineHeightSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>

<div id="divlineDemo" class="section row">
<hr id="lineDemo" />

</div>

JS：

$(function() {
    var colorPicker = $('#backgroundcolor');
    var headline = $('#lineDemo');
    var lineHeight = $('#lineHeightSelect');

    //If the localStorage exists, use it, otherwise use the current values
    var lineH = localStorage.lineH || lineHeight.val();
    var color = localStorage.color || colorPicker.val();

    headline.css("height", lineH + "px");
    lineHeight.val(lineH);
    headline.css("backgroundColor", color);
    colorPicker.val(color);

    lineHeight.on("change", function(){
        headline.css("height", $(this).val() + "px");

        //Sets the local storage line height to the changed value
        localStorage.lineH = $(this).val();
    });

    colorPicker.on("change", function() {
        headline.css('backgroundColor', $(this).val());

        //Sets the local storage color to the new value
        localStorage.color = $(this).val();
    });

});

通过ajax更新并获取元素值

1 个答案: