javascript - 使用 PHP 和 Javascript 在默认 HTML 选择上运行函数

Question

我尝试在 HTML 选择上运行默认函数，但默认函数不适用于默认选择值，但它适用于用户选择

<?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 然后在 HTML Select Two 中选择项目，但是 HTML Select Two 仅由 手动用户工作选择 并且不适用于默认的编程值

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

我该如何解决？

Answer 1

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

---

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

在你的onload script (或者如果脚本位于页面底部，则在函数之后)，也运行 Func()，然后设置 #city 的值:

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

您需要将所选城市存储在某个地方，我的建议是将其添加到选择中:

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

注意:在 HTML5 中设置数据属性 should begin with data- , 不是下划线。所以它是 data-item=""，而不是 data_item=""。这将在运行 HTML 验证器时给您一个警告。