运行默认函数 HTML Select with PHP And Javascript

Question

我尝试运行 HTML Select 上的默认函数，但默认函数不适用于默认 Selected 值，但它适用于用户 Select

<?php
    $status_selected = 'A002';
?>
<!-- HTML Select 1 -->
<select id="state" class="l" name="state" onchange="Func()">
<option value="A001" <?php if($status_selected == "A001") echo "selected"; ?> data_item=" , StateA003 One, A003 State Two, A003 State Three">A001</option>
<option value="A002" <?php if($status_selected == "A002") echo "selected"; ?> data_item=" , A003 State One, A003 State Two, A003 State Three">A002</option>
<option value="A003" <?php if($status_selected == "A003") echo "selected"; ?> data_item=" , A003 State One, A003 State Two, A003 State Three">A003</option>
</select>
<!-- HTML Select 2 -->
<label for="city">Item : </label><select id="city" name="item" class="l"  onchange="onSelected()">

<script>
    function Func() {
        var city = document.getElementById('item');
        var state = document.getElementById('state');
        var val=state.options[state.selectedIndex].getAttribute('data_item');
        var arr=val.split(',');
        item.options.length = 0;
        for(i = 0; i < arr.length; i++) {
            if(arr[i] != "") {
                item.options[item.options.length] = new Option(arr[i],arr[i]);
            }
        }
    }

    function onSelected() {
        var item = document.getElementById('item').value;
        var state = document.getElementById('state').value;
        console.log('Parent : ' + state+ ', Item : ' + item);
    }
</script>

它加载 HTML Select One 然后 Select HTML Select Two 中的项目，但是 HTML Select Two 仅适用于 Manual User Select 并且不适用于默认的编程值

以上所有代码都在 PHP 文件中。

我该如何解决？

Answer 1

不确定是否相关，但也许您想要一个 chained select 框？如果不是，请澄清你的问题，很难理解。

编辑：所以真正的问题是select通过代码选择正确的选项。在这种情况下，这是 How do I programmatically set the value of a select box element using javascript?.

的副本

在您的 onload script 中（如果脚本位于页面底部，则在函数之后），还有运行 Func()，然后设置 [=13] 的值=]:

Func();
var state = document.getElementById('state'),
    city = document.getElementById('city'),
    selectedCity = state.getAttribute('data-selected-city');
if(selectedCity) {
    city.value = selectedCity;
}

您需要将 selected 城市存储在某个地方，我的建议是将其添加到 select：

<select id="state" data-selected-city="new-york">
<!--and so on--->
</select>

注意：在 HTML5 should begin with data- 中设置数据属性，而不是下划线。所以它是 data-item=""，而不是 data_item=""。当运行ning HTML validator.

时，这会给你一个警告

Answer 2

停止 PHP 标签：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

在放置脚本标签时：

$(function() {
    $("#state").on("change", Func()); 
});

之后：

item.options[item.options.length] = new Option(arr[i],arr[i]);

输入代码：

$(item).prop("selectedIndex",i);

运行默认函数 HTML Select with PHP And Javascript

Run Function on default HTML Select with PHP And Javascript

javascript

php

html-select

运行 默认函数 HTML Select with PHP And Javascript

Run Function on default HTML Select with PHP And Javascript

javascript

php

html-select

运行默认函数 HTML Select with PHP And Javascript