How to change <select> selected option using outside element

1 Views

I want to change the selected option of a <select> dropdown using a element outside of the <select>. I’m using WordPress, and the select functionality is under this function: http://codex.wordpress.org/Function_Reference/selected

I tried a simple jQuery function:

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

This code worked, yet just with the html element, didn’t work with the wordpress function, the functionality of everything else is under the selected WordPress function.
Is there a way to use this function outside of the <select> element?

Post Views: 1

Related posts

Leave a Reply

5 comments

  1. You can use raw javascript to change a select element option, but you may need to change your implementation slightly. Simply access the select element using the id attribute and then determine the index of the option element you would like to 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; 
}

    EDIT

    I think I misunderstood exactly what you are trying to do. If I am getting this right, what you want is to be able to do is click a <div> with some text in it, which will then select the appropriate <option> in a <select> box matching the text from your <div>. Hopefully I am understanding that is what you want to do. If so, then try this function out:

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

    Next you will need to pass the function the <div> element with the text and the <select> element to operate on.

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

    That should get you what you need. Hope that helps, or at least gets you going in the right direction.

  2. Try this one:

    you don’t need fire onclick function to all div tag:

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

    Thanks.

  3. I think what you want is selecting a select option with a button outside the select box element. Well you can use this on any html with Jquery:

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

    Tested this and it will work as you want.

    jsfiddle

  4. You could pass group id value along with product id and set the value through getting element by id rather than by class
    something like this…

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

    Hope it helped…

  5. What I have understand so far, there is no issue with this code

    function selectOptionDD(title) {
    $(".selectDD").val(title);
}

    and as you said somehow following line is not working.

    <?php echo selected( $selected_value, $product_id, false ); ?>

    and what you asked for

    Is there a way to use this function outside of the element?

    So when you click on the div element it will call the function selectOptionDD in the javascript, but when page loads it will not show the last selected item that is may be saved in the database and currently it has in $selected_value php variable? If this is the case what I can suggest you is run the following code at the end of your page.

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

    I hope this will help, I understood your question correctly..