php – 如何使用外部元素更改所选选项

我想更改< 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属性访问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>

这应该可以满足你的需求.希望有所帮助,或至少让你朝着正确的方向前进.

php – 如何使用外部元素更改所选选项

相关文章