我想更改< select>的所选选项使用< select>之外的元素下拉列表.我正在使用wordpress,并且选择功能在此功能下:http://codex.wordpress.org/Function_Reference/selected
<select id="bto_item_options_<?PHP echo $group_id; ?>" name="bto_selection_<?PHP echo $group_id; ?>" class="selectDD">
[Loop details]
<option data-title="<?PHP echo get_the_title( $product_id ); ?>" value="<?PHP echo $product_id; ?>" <?PHP echo selected( $selected_value, $product_id, false ); ?> ><?PHP echo get_the_title( $product_id ); ?></option>
[Loop end]
</select>
[Loop details]
<div id="<?PHP echo $product_id; ?>" onclick="selectOptionDD(<?PHP echo $product_id; ?>)" ><?PHP echo get_the_title( $product_id ); ?></div>
[Loop end]
<script type="text/javascript">
function selectOptionDD(title) {
$(".selectDD").val(title);
}
</script>
这个代码工作,但只是使用html元素,不能使用wordpress函数,其他所有功能都在选定的wordpress函数下.
有没有办法在< select>之外使用此功能?元件?
解决方法:
您可以使用原始javascript来更改选择元素选项,但您可能需要稍微更改您的实现.只需使用id属性访问select元素,然后确定要选择的选项元素的索引.
function selectDD(option = 0) { //pass the options index you want into the function
//Change "SelectBoxID" to match your id attribute
var selectBox = document.getElementById("SelectBoxID");
selectBox.options[option].selected = true;
}
编辑
我想我误解了你想要做的事情.如果我做对了,你想要做的就是点击< div>其中包含一些文本,然后选择适当的<选项>在< select>中框与您的< div>中的文字相匹配.希望我理解这就是你想要做的.如果是这样,那么试试这个功能:
function selectDD(div, select) {
var match = div.innerHTML;
var found = false;
var ndx = false;
for(var i = 0. i < select.options.length; i++) {
if(found) {
break;
}
if(match.localeCompare(select.options[i].innerHTML) == 0) {
ndx = i;
found = true;
}
}
if(found) {
select.options[ndx].selected = true;
}
}
接下来,您需要传递函数< div>元素与文本和< select>要操作的元素.
<div id="<?PHP echo $product_id; ?>" onclick="selectDD(this, document.getElementById('bto_item_options_<?PHP echo $group_id; ?>')" ><?PHP echo get_the_title( $product_id ); ?></div>
这应该可以满足你的需求.希望有所帮助,或至少让你朝着正确的方向前进.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。