Develop Reference

multiselect filter using javascript

I have option tag and it works fine with single filter and I want to make it multi select....following is my code:-
$('#version_no').change(function () {
var version_no = $('#version_no').val();
if (version_no != null) {
showAll(version_no);
} else {
showAll();
}
});
showAll() is a function that returns data after filtering. if no filter is selected then everything is shown.
following is the view code:-
<select multiple="multiple" style="margin-top:15px;" name="version_no" id="version_no">
<option value="">Select Version No</option>
<?php if (count($get_version_no)): ?>
<?php foreach ($get_version_no as $version): ?>
<option value=<?php echo $version->version_no; ?>><?php echo $version->version_no; ?></option>
<?php endforeach; ?>
<?php else: ?>
<?php endif; ?>
$get_version_no is generating the dropdown value like 1,1.1,1.2 etc.....
SO I want to make it multi select any help will be appreciated. I'm using codeigniter 3.

You need to make version_no array in name for multiple select
<select multiple="multiple" style="margin-top:15px;" name="version_no[]" id="version_no">
In jquery
var version_no= [];
$.each($("#version_no option:selected"), function(){
version_no.push($(this).val());
});
var version = version_no.join(", ");
version will be the string with all selected values seperated by comma

Your Javascript code just needs to be refactored so that version_no is an array instead of a single value. You can use the ':selected' selector to get the selected options.
(see https://api.jquery.com/selected-selector/)
You will also need to refactor the showAll() function so that it parses an array instead of a single value. I would also have the showAll() function perform null checks instead of doing that if...then/else.

Want to update one select block if the value selected on the other select box

As i mention on the question, i want to update one select box if another value in the another select box is selected.
for example:
<select id="makale" size="4"name="formMakale"style="height:7em;width:16em;border:0px;outline:0px;font-size:16px;padding-left:10px;" >
<?php
$authorsQuery = $hb->authors();
foreach($authorsQuery as $v){
echo '<option value="'.$v->id.'">'.$v->name.'-'.count($hb>aticlesbyauthor($v),1000).' yazi</option>';}
?>
</select>
<select id="kategoriSec" size="4" name="formCat"style="height:7em;width:16em;border:0px;outline:0px;fontsize:16px;padding-left:10px;" >
<?php
$catQuery = $hb->db->get_results("SELECT * FROM category");
foreach ($catQuery as $v) {
echo '<option value="'.$v->id.'">'.$v->name.'</option>';
}
?>
if i select something from this select box with id makale, i want to update the options of the select box with id kategorisec.
can you help me?
Thank you.

If you just want to change it on the browsers side, use the onchange event handler.
If you want to update the checkboxes based on server data, you could use ajax or simply use an iframe:
<input onclick="update(this)">
<iframe src="checkboxes.php">Oh ,update your browser</iframe>
<script>
function update(elem){
if(elem.selected){ iframe=document.getElementsByTagName("iframe")[0]
iframe.src="checkboxes.php?select="+elem.value;
}
}
</script>

Run Function on default HTML Select with PHP And Javascript

I try to Run Default Function on HTML Select, but Default Function doesn't works for Default Selected Value, But it Works On User Select
<?php
$status_selected = 'A002';
?>
<!-- HTML Select 1 -->
<select id="state" class="l" name="state" onchange="Func()">
<option value="A001" <?php if($status_selected == "A001") echo "selected"; ?> data_item=" , StateA003 One, A003 State Two, A003 State Three">A001</option>
<option value="A002" <?php if($status_selected == "A002") echo "selected"; ?> data_item=" , A003 State One, A003 State Two, A003 State Three">A002</option>
<option value="A003" <?php if($status_selected == "A003") echo "selected"; ?> data_item=" , A003 State One, A003 State Two, A003 State Three">A003</option>
</select>
<!-- HTML Select 2 -->
<label for="city">Item : </label><select id="city" name="item" class="l" onchange="onSelected()">
<script>
function Func() {
var city = document.getElementById('item');
var state = document.getElementById('state');
var val=state.options[state.selectedIndex].getAttribute('data_item');
var arr=val.split(',');
item.options.length = 0;
for(i = 0; i < arr.length; i++) {
if(arr[i] != "") {
item.options[item.options.length] = new Option(arr[i],arr[i]);
}
}
}
function onSelected() {
var item = document.getElementById('item').value;
var state = document.getElementById('state').value;
console.log('Parent : ' + state+ ', Item : ' + item);
}
</script>
it load HTML Select One And then Select Item in HTML Select Two, But HTML Select Two Works Only By Manual User Select And Not Works For Default Programatically Value
Whole Of Codes Above Are On PHP File.
How i can fix it ?

Not sure if it is relevant, but maybe you want a chained select box? If not, please clarify your question, it's very hard to follow.
EDIT: So the real issue is selecting the right option by code. In that case, this is a duplicate of How do I programmatically set the value of a select box element using javascript?.
In your onload script(or just after the functions if the script is at the bottom of the page), also run Func(), then set the value for #city:
Func();
var state = document.getElementById('state'),
city = document.getElementById('city'),
selectedCity = state.getAttribute('data-selected-city');
if(selectedCity) {
city.value = selectedCity;
}
You need to store the selected city somewhere, my suggestion is to add it to the select:
<select id="state" data-selected-city="new-york">
<!--and so on--->
</select>
NOTE: setting a data attribute in HTML5 should begin with data-, not an underscore. So it's data-item="", not data_item="". That will give you a warning when running HTML validator.

Put Out Of PHP Tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
On Script Tag Put :
$(function() {
$("#state").on("change", Func());
});
After :
item.options[item.options.length] = new Option(arr[i],arr[i]);
put the code :
$(item).prop("selectedIndex",i);

dynamic disable select box with javascript

I am trying to make an html select box which dynamically disables and enables based on what the user select in a different select box... This was working fine when I used just html, but I would like to use the jQuery plugin Chosen for this, and it is not working... The main thing I need dynamic chosen to be disabled or enabled based on the onchange for the other select box. Is this possible with chosen? And how? Thanks so much.
Old Code : Working
<script>
function myDisable() {
a=1;
b=3;
for (i=1;i<3;i++){
posi=a+b*i;
document.getElementById('drop'+posi).disabled = true;
} }
</script>
New code with PHP : Not Working
<script>
function myDisable() {
a=<?php echo $angka; ?>; // a variable number for id select box
b=<?php echo $fields; ?>; // b variable number of many fields table
j=<?php echo $jp; ?>; // j variable number of select boxes that will disable
for (i=1;i<j;i++){
posi=a+b*i;
document.getElementById('drop'+posi).disabled = true;
} }
</script>
PHP select box looping +/- 50 :
<select name="modul[]" id="drop<?php echo $angka ?>" onchange="fetch_select<?php echo $random ?>(this.value); check(this); myDisable();">
<option value="0">Lanjutan</option>
<?php
include 'include/conn.php';
$select=mysql_db_query(#$db,"select nama_modul,jp from modul where nama_pelatihan='$nama_pelatihan'",#$koneksi);
while($row=mysql_fetch_array($select))
{
$jp=$row['jp'];
echo "<option value='".$row['nama_modul']."'>".$row['nama_modul']."(".$row['jp'].")</option>";
}
?>
</select>

Try executing a call to $("#form_field").trigger("chosen:updated"); after the for loop just before exiting the myDisable() function. In your case #form_field will be some selector that identifies your html select box element. Chosen might need to redraw itself to reflect the updated options and this is how we can tell it to do that.

Multiple dependent dynamic select boxes in form

There is a model A that has_many B and a form where one can create a new A and
add/remove Bs. I.e. there is a link Add new B that runs some Javascript to insert another partial where one fills in values for B. All works fine.
The problem
Specifying a B is done through selecting the values using a couple of select
boxes. The problem is that depending on a value selected in one, the
collections used in the other selects should be scoped to only show relevant options. It's the classic case
with dynamic select boxes (think country - state select boxes), only with more
select boxes and I'd like all the select boxes to appear initially, so the
user can start from anywhere (select state first and country select box
narrows down its collection to the ones that can be chosen for that state).
Current approach
The Bs are rendered in a table, one B per row and I was thinking that I could
use AJAX to replace the table row (content) after fetching the new collections
from the server. This obviously needs a couple of things in place.
tr tag must have a unique id attribute, so replace_html can be used.
need to have a trigger on change for each select box
need to pass all select boxes' values (for that row) to the server
I'm stuck here, because of the following:
adding a B needs to have something unique to identify the tr tag as well
as all the selects on that row. I can use Time.now.to_i but that won't
work for the Javascript run by the link to add a new B because that will
hardcode the value and all use the same.
not sure if I should go with observe_field or a remote call in the select
form field helper.
how to pick up the values of all selects in one row and pass that remotely
to the server when triggered?
The project I'm working on is Rails 1.2.3 and uses Prototype. Please feel free to post "newer" solutions too, because I'm curious to see different solutions.
Any help on this is highly appreciated. Thanks in advance!

This doesn't answer your entire question but it might get you started. I handle it like this... this is for playlist entry, where the user can add new forms in a div #playlist-entry, and each form is .new_song_form with a hidden field .form_num (which I use in the create.js.erb file to tell it which form to hide/warn of validation errors, which isn't really relevant for you I guess).
var form_counter = 1;
function addSongFields() {
playlistEntry = $('#playlist-entry');
playlistEntry.append("<%= escape_javascript(render :partial => 'playlist_entry_form', :locals => { :schedule_event => #schedule_event, :playlist_entry => PlaylistEntry.new }) %>");
playlistEntry.find('.new_song_form:last').attr('id', 'new_song_form_'+form_counter);
playlistEntry.find('.form_num:last').val('new_song_form_'+form_counter);
}
$(document).ready(function() {
$('#add-song-link').click(function(event) {
event.preventDefault();
addSongFields();
form_counter++;
});
});
This form is a little different because there's no one "major" form to submit, it's a bunch of forms all on one page, but this basic idea might help you. It's not perfect programming - for example I should be passing form_counter as an argument to the function... but it works perfectly.

Dynamic Dependent Select Boxes
How to create dependent drop down list in php? I have searched a lot then implemented this one. This is created using HTML, JS, PHP simple dependent drop down boxes.
I knew it was possible to create a dynamic dependent drop down form using PHP, MySQL, and JavaScript,
but I had never had an excuse to use one before I need to teach to my students.
<?php
$region = $country = $state = $city = null; //declare vars
$conn = mysql_connect('localhost', 'username', 'password');
$db = mysql_select_db('selects',$conn);
if(isset($_GET["region"]) && is_numeric($_GET["region"]))
{
$region = $_GET["region"];
}
if(isset($_GET["country"]) && is_numeric($_GET["country"]))
{
$country = $_GET["country"];
}
if(isset($_GET["state"]) && is_numeric($_GET["state"]))
{
$state = $_GET["state"];
}
if(isset($_GET["city"]) && is_numeric($_GET["city"]))
{
$city = $_GET["city"];
}
?>
<script language="JavaScript">
function autoSubmit()
{
var formObject = document.forms['theForm'];
formObject.submit();
}
</script>
<form name="theForm" method="get">
<!-- REGION SELECTION -->
<select name="region" onChange="autoSubmit();">
<option value="null"></option>
<option VALUE="1" <?php if($region == 1) echo " selected"; ?>>East</option>
<option VALUE="2" <?php if($region == 2) echo " selected"; ?>>West</option>
</select>
<br><br>
<!-- COUNTRY SELECTION BASED ON REGION VALUE -->
<?php
if($region != null && is_numeric($region))
{
?>
<select name="country" onChange="autoSubmit();">
<option VALUE="null"></option>
<?php
//POPULATE DROP DOWN MENU WITH COUNTRIES FROM A GIVEN REGION
$sql = "SELECT COUN_ID, COUN_NAME FROM COUNTRY WHERE RE_ID = $region";
$countries = mysql_query($sql,$conn);
while($row = mysql_fetch_array($countries))
{
echo ("<option VALUE=\"$row[COUN_ID]\" " . ($country == $row["COUN_ID"] ? " selected" : "") . ">$row[COUN_NAME]</option>");
}
?>
</select>
<?php
}
?>
<br><br>
<?php
if($country != null && is_numeric($country) && $region != null)
{
?>
<select name="state" onChange="autoSubmit();">
<option VALUE="null"></option>
<?php
//POPULATE DROP DOWN MENU WITH STATES FROM A GIVEN REGION, COUNTRY
$sql = "SELECT STAT_ID, STAT_NAME FROM states WHERE COUN_ID = $country ";
$states = mysql_query($sql,$conn);
while($row = mysql_fetch_array($states))
{
echo ("<option VALUE=\"$row[STAT_ID]\" " . ($state == $row["STAT_ID"] ? " selected" : "") . ">$row[STAT_NAME]</option>");
}
?>
</select>
<?php
}
?>
<br><br>
<?php
if($state != null && is_numeric($state) && $region != null && $country != null)
{
?>
<select name="city" onChange="autoSubmit();">
<option VALUE="null"></option>
<?php
//POPULATE DROP DOWN MENU WITH CITIES FROM A GIVEN REGION, COUNTRY, STATE
$sql = "SELECT CIT_ID, CITY_NAME FROM CITY WHERE STAT_ID = $state ";
$cities = mysql_query($sql,$conn);
while($row = mysql_fetch_array($cities))
{
echo ("<option VALUE=\"$row[CIT_ID]\" " . ($city == $row["CIT_ID"] ? " selected" : "") . ">$row[CITY_NAME]</option>");
}
?>
</select>
<?php
}
?>
</form>