通过 ajax 更新并获取元素值

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->css_style的属性：

高度：5px；背景色：rgb(0, 253, 255); 并将它们作为 backgroundcolor 元素的默认值 (background-color: rgb(0, 253, 255)) 和 lineHeight (height: 5px) --> 5 它必须是这个下拉列表的默认选项。

我确信必须有一些选项可以做到这一点，但我不知道该怎么做......

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

提前致谢。

Answer 1

不完全确定 $model->css_style 是什么，我认为您的代码中不需要它。如果您想为此下拉列表设置默认值，也许您可​​以使用 localstorage 而不是数据库？如果您需要本地计算机上的人以外的人访问数据库，则只需要数据库，但我认为 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();
    });

});