Bootstrap 3 Multiselect Plugin as Form Element

Bootstrap 3 multiselect plugin as form element

Again hello ;)
See

UPDATED

http://jsfiddle.net/t2qaP/13/

select.multiselect,
select.multiselect + div.btn-group,
select.multiselect + div.btn-group button.multiselect,
select.multiselect + div.btn-group.open .multiselect-container{
    width:100% !important;
}

UPDATED 2
You need to add buttonClass to multiselect options. But why do it? Looks so good.
http://jsfiddle.net/t2qaP/14/

$('.multiselect').multiselect({
    includeSelectAllOption: true,
    buttonClass: 'form-control'
});

Sample Image

JQuery Bootstrap Multiselect plugin - Set a value as selected in the multiselect dropdown

Thank you all for your answers.

Taking all of your answers as a guideline, I resolved the problem with the below code:

var valArr = [101,102];
i = 0, size = valArr.length;
for(i; i < size; i++){
  $("#data").multiselect("widget").find(":checkbox[value='"+valArr[i]+"']").attr("checked","checked");
  $("#data option[value='" + valArr[i] + "']").attr("selected", 1);
  $("#data").multiselect("refresh");
}

Thanks once again for all your support.

Why my jquery multiselect plugin not working

I've just used the same links that you have provided and created a quick multi select. Everything ran as expected (you can click on "Run code snippet")

Few things you should check

Check to see if there's any errors in the console log (you can view this in your browsers DevTools)
Make sure the class is being set correctly on your @Html.ListBoxFor
Make sure the multiselect function is running after the select element has be rendered

<html>
<head>
  <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
  
  <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
  <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />

</head>
<body>
<select id="example-getting-started" class="listbox" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
</body>
<script type="text/javascript">
    $(document).ready(function() {
        $('.listbox').multiselect({
            includeSelectAllOption: true
        });
    });
</script>

</html>

Bootstrap Multi-Select Form submit twice

Thanks for all you reply.
Seems this was able to solve my issue :-)

 $('#SelectIDExample').multiselect({
        buttonWidth: '400px',
        dropRight: true,
        preventInputChangeEvent: true
      });

Available in Jfiddle also.
jsfiddle.net/dchockal/fkypqwf0

How to post multiselect selected options as one param in url - Bootstrap Multiselect

I got it done by using a hidden field.

var text = $('#sites').val();
$('#sites_hidded').val(text);

with html (removed name attr from select so it will not submit with form)

<select id="sites" class="form-control" multiple="multiple">
    <option value="1">Site 1</option>
    <option value="2">Site 2</option>
    <option value="3">Site 3</option>
</select>
<input type="hidden" name="sites" id="sites_hidden">

bootstrap multiselect get selected values

the solution what I found to work in my case

$('#multiselect1').multiselect({
    selectAllValue: 'multiselect-all',
    enableCaseInsensitiveFiltering: true,
    enableFiltering: true,
    maxHeight: '300',
    buttonWidth: '235',
    onChange: function(element, checked) {
        var brands = $('#multiselect1 option:selected');
        var selected = [];
        $(brands).each(function(index, brand){
            selected.push([$(this).val()]);
        });

        console.log(selected);
    }
});

WordPress Settings API Saving Bootstrap Multiselect Field using Selected Function

I've tested your code.

You'll have to fix that select HTML page. here is the explanation and new version Render_Select function.

CHANGELOG:

Change Plugin_Settings_Sanitize[Select_Field] to Plugin_Settings_Sanitize[], if you are trying to store other settings fields in Plugin_Settings_Sanitize and Want to save Product ids in Select_Field key then use Plugin_Settings_Sanitize[Select_Field][]
change selected($options['Select_Field'], $product->get_id()) to selected( in_array( absint( $product->get_id() ), $selected_ids, true ), true )

where $selected_ids is an array if selected product ids.

as you'll store ids in array then selected function won't work with the array. so we'll have to check true === true in selected function. for that, we'll check if the current product id in the loop is available in saved values.

if it's available in the array then true otherwise false, then use that true/false within the selected function. on top of that, I am mapping the options values array with absint so that we can do the strict comparison with ===

function Render_Select() {
    // Get the options while passing empty array as default value.
    $options = get_option( 'Plugin_Settings_Sanitize', array() );

    // Check if options is empty and Select_Field key exists and it's data is not empty.
    // then converting the type to array using (array), because we want to make sure we have an array
    // then we map it with absint function using array_map function so that we have integer
    // not string that we are going to use for strict comparison.
    $selected_ids = ! empty( $options ) && isset( $options['Select_Field'] ) && ! empty( $options['Select_Field'] ) ? array_map( 'absint', (array) $options['Select_Field'] ) : array();

    // Fetch the product array.
    $products = wc_get_products(
        array(
            'type'   => 'course',
            'status' => 'published',
            'limit'  => -1,
        )
    );

    ?>
    <select class="" name='Plugin_Settings_Sanitize[Select_Field][]' multiple>
        <?php
        /**
         * Explanation of this code
         * selected( in_array( absint( $product->get_id() ), $selected_ids, true ), true )
         *
         * $is_selected  = in_array( absint( $product->get_id() ), $selected_ids, true ); // check if product id is in selected ids.
         * selected( $is_selected, true ); // check if is selected is true, if true write selected="selected" by function.
         */
        ?>
        <?php foreach ( $products as $product ) { ?>
            <option value='<?php echo esc_attr( $product->get_id() ); ?>' <?php selected( in_array( absint( $product->get_id() ), $selected_ids, true ), true ); ?>>
                <?php echo esc_html( $product->get_title() ); ?>
            </option>
        <?php } ?>
    </select>
    <?php
}

Bootstrap 3 Multiselect Plugin as Form Element