Thursday, 14 June 2018

DropDown with multiple with open select option

//Multiple Select Drop Down Code
<div class="multiselect" id="multiple">
    <?php
    global $wpdb;
    $getid= $_GET['id'];
    $sql11 = "SELECT * FROM TABLENAME WHERE id = '$getid'";
    $result11 = $wpdb->get_results($sql11);
    $count1 = 1;
    foreach($result11 as $row11){?>                             
        <label>
            <input type="checkbox" id="chknote_<?php echo $count1; ?>" name="client_check[]" class="queAns trigger" data-trigger="hidden_fields_<?php echo $count1; ?>" data-trigger-one="hidden_fields_one<?php echo $count1; ?>"  value="<?php echo $count1; ?>" />
            <?php echo $count1; ?>. <?php echo $client->lastname;?>'s <?php echo $row11->goal; ?>
        </label>
    <?php $count1++;}?>
</div>

//multiple select drop down js script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
jQuery(function() {
jQuery(".multiselect").multiselect();
});
jQuery.fn.multiselect = function() {
$(this).each(function() {
var checkboxes = $(this).find("input:checkbox");
checkboxes.each(function(){
var checkbox = $(this);
if (checkbox.prop("checked"))
checkbox.addClass("multiselect-on");
checkbox.click(function() {
if (checkbox.prop("checked")){
checkbox.addClass("multiselect-on");
}else{
checkbox.removeClass("multiselect-on");
}
});
});
});
};
</script>

//open selected option script
<script>
jQuery(function() {
  jQuery('.hidden').hide();
  jQuery('.trigger').change(function() {
var hiddenId = jQuery(this).attr("data-trigger");
if (jQuery(this).is(':checked')) {
  jQuery("#" + hiddenId).show();
} else {
  jQuery("#" + hiddenId).hide();
}

var hiddenId = jQuery(this).attr("data-trigger-one");
if (jQuery(this).is(':checked')) {
  jQuery("#" + hiddenId).show();
} else {
  jQuery("#" + hiddenId).hide();
}

  });
</script>

//open selected option html/php code
<?php
global $wpdb;
$getid = $_GET['getid'];
$sql="SELECT * FROM TableName WHERE id = '$getid'";
$result=$wpdb->get_results($sql);
$count = 1;
foreach($result as $row){?>
<span id="hidden_fields_<?php echo $count; ?>"  style="display: none;">

<?php echo $count; ?>. <?php echo $client->columnName;?>'s <?php echo $row->columnName; ?>:
<p><input type="hidden" name="goal_id[]" value="<?php echo $row->columnName; ?>" /></p>         
<div class="col-md-12"> Notes:
<textarea name="note[]"  class="custom-txt-area" id="hidden_<?php echo $count; ?>"></textarea>
</div>

</span>             
<?php  $count++;} ?>

//css for dropdown
<style>
.queAns{
    margin-right:5px !important;
}
.multiselect {
    width:33em;
    height:10em;
    border:solid 1px #c0c0c0;
    overflow:auto;
    padding:5px;
}

.multiselect label {
    display:block;
}

.multiselect-on {
    color:#ffffff;
    background-color:#d29714;
}
</style>
-------------------------------------------------
Let me know your thoughts and questions in the comments.
Email: vyasankit2008@gmail.com

No comments:

Post a Comment