运行 默认函数 HTML Select with PHP And Javascript
Run Function on default HTML Select with PHP And Javascript
我尝试 运行 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 文件中。
我该如何解决?
不确定是否相关,但也许您想要一个 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.
时,这会给你一个警告
停止 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 上的默认函数,但默认函数不适用于默认 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 文件中。
我该如何解决?
不确定是否相关,但也许您想要一个 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.
停止 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);