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>

应该为您提供所需的信息。希望有所帮助，或至少让你朝着正确的方向前进。

Answer 2

试试这个：

你不需要为所有div标签启用onclick功能：

<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>

感谢。

Answer 3

我认为你想要的是选择一个带有选择框元素之外的按钮的选择选项。那么你可以在任何带有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>

经过测试，它可以随心所欲地工作。

jsfiddle

Answer 4

您可以将组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>

希望它有所帮助...

Answer 5

到目前为止我所理解的是，此代码没有问题

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>

我希望这会有所帮助，我理解你的问题......

如何使用外部元素</select>更改<select>所选选项

5 个答案: