我想使用<select>之外的元素更改<select>下拉列表的选定选项。我正在使用Wordpress，选择功能在此功能下：http://codex.wordpress.org/Function_Reference/selected
我尝试了一个简单的jQuery函数：
<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 属性访问选择元素，然后确定要选择的选项元素的索引。
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>中的文本匹配的相应<option>。 希望我能理解这就是你想做的。 如果是这样，请尝试以下函数：
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>
这应该能满足你的需求。 希望这有所帮助，或者至少让你朝着正确的方向前进。
试试这个：
您不需要对所有div 标签触发点击功能：
<select id="bto_item_options_<?php echo $group_id; ?>" name="bto_selection_<?php echo $group_id; ?>" class="selectDD">
Options...
</select>
<div class="temp" id="<?php echo $product_id; ?>"><?php echo get_the_title( $product_id ); ?></div>
<script type="text/javascript">
$('.temp').bind('click',function(){
var btnid = $(this).attr('id');
$('.selectDD option').each(function(){
if($(this).attr('id') == btnid ){
$(this).attr('selected','selected');
}
});
});
</script>
谢谢。
我认为您想要的是选择一个带有选择框元素外部按钮的选择选项。好吧，你可以用Jquery在任何html上使用它：
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function () {
$('body').on('click', '.btn', function(){
var id = $(this).attr("id");
$('.selectbox').children('option').each(function (key, option) {
if(id == $(option).attr('value')){
$(option).attr('selected', 'selected');
}
else{
$(option).removeAttr('selected');
}
});
});
});
</script>
</head>
<body>
<select class="selectbox">
<option value="2">Something</option>
<option value="3">BlaBlaBla</option>
<option value="7">bobobobob</option>
<option value="9">JOOOOPIE</option>
</select>
<button class="btn" id="2">Something</button>
<button class="btn" id="3">BlaBlaBla</button>
<button class="btn" id="7">bobobobob</button>
<button class="btn" id="9">JOOOOPIE</button>
</body>
</html>
对此进行了测试，它将按您的要求工作。
斯菲德尔
您可以将组 id 值与产品 id 一起传递，并通过按 id 而不是按类获取元素来设置值像这样的东西...
<div id="<?php echo $product_id; ?>" onclick="selectOptionDD(<?php echo $group_id; ?>,<?php echo $product_id; ?>)" ><?php echo get_the_title( $product_id ); ?></div>
<script type="text/javascript">
function selectOptionDD(groupId,title) {
$("#bto_item_options_"+groupId).val(title);
}
</script>
希望它有帮助...
到目前为止我所了解的，这段代码没有问题
function selectOptionDD(title) {
$(".selectDD").val(title);
}
正如你所说，不知何故，遵循行不起作用。
<?php echo selected( $selected_value, $product_id, false ); ?>
以及您的要求
有没有办法在元素之外使用这个函数？
因此，当您单击div 元素时，它将在 javascript 中调用函数selectOptionDD，但是当页面加载时，它不会显示可能保存在数据库中并且当前在变量$selected_value php中最后一个选定的项目？如果是这种情况，我可以建议您在页面末尾运行以下代码。
<script>
$(document).ready(function () {
// check if $selected_value is not an alien value
<?php if ($selected_value != null) { // or what ever in your case != '' or != 0 ?>
// save the value of $selected_value in to a javascript variable
var _selected_value = '<?php echo $selected_value; ?>';
// call your javascript function that actually calls onclick.
selectOptionDD( _selected_value );
<?php } ?>
});
</script>
我希望这会有所帮助，我正确理解了您的问题。