php - 如何使用外部元素更改 <select> 选定的选项

Question

我想更改 <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> 之外使用此功能？元素？

Answer 1

您可以使用原始 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>。其中包含一些文本，然后将选择适当的 <option>在<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>

那应该给你你所需要的。希望这对您有所帮助，或者至少让您朝着正确的方向前进。