Menu
I have jQuery chosen named centro medicos in an insertion form, I can select all data, select some of the data. If I click select all here is the result:
Let's say that I select only 3 items and then I save. Now I want to edit. When the edit page is loaded I want to have the 3 items that I selected loaded:
And if I click on select all (Selectionar todo) the rest of items are displayed.
1- Controller
public function edit_form()
{
$edit_id= $this->uri->segment(3);
$data['ITEM_EDIT'] = $this->model->get_title_by_id($edit_id);
$data['ITEM_ALL']= $this->model->get_all_title();
$this->load->view('view_edit_form', $data);
}
2- View
<select class="chosen-select" multiple name="item[]">
<?php
foreach($ITEM_ALL as $item_all) {
foreach($ITEM_EDIT as $item_edit) {
if($title_edit->title== $title_all->title)
{
echo '<option value="'.$item_all->title.'" class="'.$item_all->id.'" selected>'.$item_all->title.'</option>';
}
else
{
echo '<option value="'.$item_all->title.'" class="'.$item_all->id.'" >'.$item_all->title.'</option>';
}
}
}
?>
</select>
3- jQuery
$(".chosen-select").chosen({
no_results_text: "Oops, nothing found : ",
})
How can I achieve this?
282
@Diasline This code works fine i've checked in my system and reproduced the error you got. This is a sample code created using the chosen. I've given a select all option in this code by clicking a button. Here is the code go through it.
<html lang="en">
<head>
<link rel="stylesheet" href="docsupport/style.css">
<link rel="stylesheet" href="docsupport/prism.css">
<link rel="stylesheet" href="chosen.css">
<button id="select-all">Select All</button><br/>
<select data-placeholder="Chosen Example" multiple class="chosen-select" tabindex="18" id="multiple-label-example">
<option value="">American Black Bear</option>
<option>Asiatic Black Bear</option>
<option selected>Brown Bear</option>
<option selected>Giant Panda</option>
<option>Sloth Bear</option>
<option>Sun Bear</option>
<option>Polar Bear</option>
<option>Spectacled Bear</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js" type="text/javascript"></script>
<script src="chosen.jquery.js" type="text/javascript"></script>
<script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
<script src="docsupport/init.js" type="text/javascript" charset="utf-8"></script>
<script>
$('#select-all').click(function(){
$('#multiple-label-example option').prop('selected', true); // Selects all options
$("#multiple-label-example").trigger("chosen:updated");
});
</script>
Here you can see on the click event of the button i've added a line to change all the options as selected and then a line below that to update the chosen. If you don't give the last line i.e , if you don't update the chosen it will not work. It will only work after updating the chosen.Hope this solves your issue .please let me know if the issue persists.
52
i think you need to update plugin state.
$(function(){
$(".chosen-select").trigger("chosen:updated");
})
Your PHP snippet needs to be changed to something more like:
<select class="chosen-select" multiple name="title[]">
<?php
$selected_titles = array_map(function ($item) { return $item->title; }, $TITLE_EDIT);
foreach($TITLE_ALL as $title)
{
$selected = in_array($title->title, $selected_titles) ? 'selected' : '';
echo '<option value="'.$title->title.'" class="'.$title->id.'" '.$selected.'>'
.$title->title
.'</option>';
}
?>
</select>
Beyond that, without a screenshot or other info, it is unclear what you mean when you say it doesn't work.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
