Develop Reference

Javascript/PHP: How to add multiple values from a select, separated by a comma, to an text field

Id like to add more than one value in text box when the user selects a value from a select field. If the text field is not empty, the values will be separated by a comma. Im using php and javascript to populate both fields. For now, when I try to select another item, the value in the text field is replaced by the nez one.
Here is my code:
echo' <div>';
echo' <label for="pnationalite"><strong>Visited countries</strong></label> ';
echo' <select onclick="this.form.paysvisites.value=this.options[this.selectedIndex].text;" name="nationalite_ID" > ';
$sql = $bdd->query("SELECT * FROM cov_pays");
//Feed the select from the db
while ($row = $sql->fetch())
{
echo '<option value="' . $row['LibPays'] . '">' . $row['LibPays'] . '</option>';
}
echo' </select> ';
echo' <div>
<br /><input type="text" name="paysvisites" placeholder="Please select one country" >
</div>
';
echo' </div><br/>';

You can use a javascript function to check whether there is already any selected countries in the textbox or not. You can call the function on onchange event of the select box. I have put comments along with the code. Hope this helps.
<select onchange="addCountry(this)" name="nationalite_ID" >
<script>
function addCountry(s) {
console.log(s.options[s.selectedIndex].text);
var thisCountry = s.options[s.selectedIndex].text; // latest selection
var selected = s.form.paysvisites.value; // already selected in the textbox
console.log(selected);
var toAdd = "";
if(selected.length) {
toAdd = ", "; // if there are already selected countries add a comma
}
if(selected.indexOf(thisCountry) === -1) { // if this selected country is not already in the textbox, add it
s.form.paysvisites.value+= toAdd + thisCountry;
}
}
</script>

Uncheck checkbox when certain values(php) from drop down is chosen

i need to uncheck a checkbox when a value is chosen from multi dropdown. The problem is the value is a php value which is generate from foreach.
below is the code of the javascript
$("#multi_search_filter").on('change', function () {
var val = $(this).val();
if (val === <?php"'.$row['batch_name'].'" ?>) {
$('#checkUncheckAll').prop('checked', false);
return;
}
$('#checkbox1').prop('checked', true);
});
this is the code of the PHP and HTML
<select name="multi_search_filter" id="multi_search_filter" multiple class="form-control selectpicker">
<?php
foreach($result as $row)
{
echo '<option value="'.$row["batch_id"].'">'.$row["batch_name"].'</option>';
}
?>
</select>
this is the input checkbox
<input type="checkbox" id="checkUncheckAll">
I tried to search for solution but failed to do so. Appreciate any help

How to get the correct selected value in Select HTML from javascript?

I get users from mysql query. I show this users into table and add a HTML into php file to all users to change a value:
...
do {
echo "<td > <a>".$row["username"]."</a> </td> \n";
echo "<td > <a>".$row["name"]."</a> </td> \n";
echo "<td > <select id='sel'> <option value='admin'>Admin</option> <option value='user'>User</option> </select> </td> \n";
} while ($row = mysql_fetch_array($result));
echo "</tbody></table> \n";
...
How can I get the option selected??
I'm trying get this in javascript but always get the same first value, independet value selected.
function myFunction() {
var e = document.getElementById("sel");
var strUser = e.options[e.selectedIndex].value;
}
Thanks!

Use the jquery .change function.
Fiddle :- https://jsfiddle.net/a2abaL44/1/
<script type="text/javascript">
$("#sel").change(function(){
var selectVal = $(this).val();
})
</script>
https://api.jquery.com/change/

Because your loop will be executed multiple times (once for each user in the database), you will have many <select> elements with the same ID. You cannot have the same ID given to many different elements, and this is why your JavaScript is only returning the value of the first <select>.
If you tell me what you are needing the selected value for, I can update the answer further.

Your code is fine, Change your select to <select id="sel" onchange="myFunction();">
<script type="text/javascript">
function myFunction() {
var e = document.getElementById("sel");
var strUser = e.options[e.selectedIndex].value;
alert(strUser);
}
</script>

Generate Select List Item Issue

Generate Dynamic Select List Item Menu using JQuery
Here is the Div :
<select name="CountryID" id="CountryID">
<option value="" id="">Select the Country</option>
......
</option>
</select>
<div id='result' name="result">
<select id="name">
<option value="" disabled>Please select above</option>
</select>
</div>
<div id='resulta' name="resulta">
<select id="name">
<option value="" disabled>Please select above</option>
</select>
</div>
Here is my Script :
<script>
var ab=$.noConflict();
ab(document).ready(function(){
ab("#CountryID").change(function(){
var CountryID=ab("#CountryID").val();
ab.post("globalregiongenerator",
{
CountryID:CountryID
},
function(data,status){
ab( "#result" ).html( data );
});
});
});
</script>
<script>
var ac=$.noConflict();
ac(document).ready(function(){
ac("#RegionName").change(function(){
//alert('action triggered');
var RegionName=ab("#RegionName").val();
ac.post("globalcitygenerator",
{
RegionName:RegionName
},
function(data,status){
ac( "#resulta" ).html( data );
});
});
});
</script>
Here i generate my Select Menu List
public function globalregiongenerator()
{
$CountryID = Input::get('CountryID');
$roles = DB::table('region')->where('CountryID', $CountryID)->lists('regionname','regionid');
echo "<select id='RegionName' name='RegionName'>";
foreach ($roles as $value)
{
echo "<option value=".$value.">".$value."</option>";
}
}
public function globalcitygenerator()
{
$RegionName = Input::get('RegionName');
$roles = DB::table('city')->where('RegionName', $RegionName)->lists('regionname','regionid');
echo "<select id='CityName' name='CityName'>";
foreach ($roles as $value)
{
echo "<option value=".$value.">".$value."</option>";
}
}
I can able to generate the First Select Menu List Item, But the action ac("#RegionName").change(function(){ is not triggering, even i tried putting alert inside it.
Is the Second List Menu Item <select id='RegionName' name='RegionName'> not creating in the page or what.
How can i do this ?
Note :
I even tried ab('#RegionName').selectmenu('refresh', true); under the ab( "#result" ).html(data); from this answer but it didn't worked
Update :
If we append $( "#result" ).append ( data ); another menu will appear, that isn't i need.
I need to the first three menu already there.

Looks like you're not closing <select, I think you need echo </select> as well. For the handler try
ac(document).on("click", "#RegionName"
You also have a var RegionName=ab("#RegionName").val(); which should be var RegionName=ac("#RegionName").val();
update:
line should be
RegionName=ac(this).val();
Update2
Change
echo "<option value=".$value.">".$value."</option>";
to
echo "<option value='".$value."'>".$value."</option>";

For dynamic elements we should use delegated events:
Change ac("#RegionName").change(function(){ /* handler body */ })
To ac(document).on("change","#RegionName",function(){ /* handler body */ })
Also Change ab("#CountryID").change(function(){ /* handler body */ })
To ab(document).on("change","#CountryID",function(){ /* handler body */ })
To get selected value, you can do like below within the function
ab(document).on("change","#CountryID",function(){
var countryId = ab(this).val();
//or like => var countryId = ab(":selected", this).val();
/* Rest of code */
})
Correct below statement in server side you have to enclose value in quotes
echo "<option value='".$value."'>".$value."</option>";

Javascript to hide selected option

I have this code to hide selected options:
function connect()
{
$(".selectbox option").show();
$(".selectbox").each(function(i) {
var obj = $(".selectbox option[value='" + $(this).val() + "']");
if($(this).val() != "") obj.hide();
});
}
function to()
{
$(".selectboxes option").show();
$(".selectboxes").each(function(i) {
var obj = $(".selectboxes option[value='" + $(this).val() + "']");
if($(this).val() != "") obj.hide();
});
}
but my problem now is that, I use PHP to generate the select tag, and in that php code i have a condition that once it sees this value it will automatically add selected=selected. but my JS would still display that variable in the drop down even though it is already selected. i tried adding:
$('.selectboxes option:selected').find("option").hide();
but it did not work. any idea on how should i solve this problem?
BTW: i forgot to mention that, the php code will generate multiple select tags with the same values that will use that function, thus when i have 3 select tags 1 will have the pre selected value and the other 2 will be null, now when i click on either 2 of those that have no values selected yet i can still see in the drop down the choice that was already pre selected in select 1, what i wanted to do is that it should be automatically hidden, with that function it will not hide it until i select other choices from the drop down. since this line:
$(".selectbox option").show();
would display all choices in the drop down, is there a condition for it to exempt "this" value?
SELECT PART:
for($z=0;$z<$rows_updatedrow;$z++)
{
?>
<select id = "sc" name = "connect_array[]" class="input-select selectbox" onchange = "connect()">
<option value = "">--Select--</option>
<?php
for($zz=0;$zz<$rows_getconnect;$zz++)
{
$data_getconnect = mysql_fetch_assoc($query_getconnect);
$field_name_getconnect[] = $data_getconnect['field_name'];
$field_display_getconnect[] = $data_getconnect['field_display'];
$field_type_getconnect[] = $data_getconnect['field_type'];
if((($field_name_getconnect[$zz] == "friends_name" && $connect == 2) || $field_type_getconnect[$zz] == "email") && $z == 0){
$selected = "selected=selected";
}else{
$selected = "";
}
?>
<option value = "<?php echo $field_name_getconnect[$zz]; ?>" <?php echo $selected; ?>><?php echo $field_display_getconnect[$zz]; ?></option>
<?php
}
?>
</select>
connect to
<br/>
<?php
}
?>
</div>
<div class = "right">
<?php
for($a=0;$a<$rows_updatedrow;$a++)
{
?>
<select name = "to_array[]" class="input-select selectboxes" onchange = "to()">
<option class = "option" value = "">--Select--</option>
<?php
for($aa=0;$aa<$rows_getto;$aa++)
{
$data_getto = mysql_fetch_assoc($query_getto);
$field_name_getto[] = $data_getto['field_name'];
$field_display_getto[] = $data_getto['field_display'];
$field_type_getto[] = $data_getto['field_type'];
if((($field_name_getto[$aa] == "friends_name" && $to == 2) || $field_type_getto[$aa] == "email") && $a == 0){
$selected = "selected=selected";
}else{
$selected = "";
}
?>
<option class = "option" value = "<?php echo $field_name_getto[$aa]; ?>" <?php echo $selected; ?>><?php echo $field_display_getto[$aa]; ?></option>
<?php
}
thank you

You already have the selected option in your selector - no need to find option - as that will return you an empty array
$('.selectboxes option:selected').hide();
// get rid of .find('option')
To exempt this value.. I'm guessing you're referring to the selected value.. you can use :not as undefined stated
$(".selectbox option:not(:selected)").show();
You can take out the inline onChange since you are using jQuery.. and bind the change event handler to the select elements on dom ready
$(function(){
$('select').change(function(){
var $sel = $('option:selected'); // get all selected options
$('option').show(); // show all options
$sel.each(function(i,v){ // loop through selected options
var $index = $(v).index(); // get index of selected option
$('select').not($(this).parent()).each(function(){ // loop through other select - not current one
if($index != 0){ // not default index
$(this).find('option').eq($index).hide(); // hide selected option in other dropdowns
}
});
});
}).change(); // <-- trigger change right away
});
http://jsfiddle.net/VE7jA/

$('.selectboxes option:selected').find("option").hide();
You are trying to find('option') inside option.. Try this
$('.selectboxes option:selected').hide();
You can also remove the element once and for all if you are using it again..
$('.selectboxes option:selected').remove();
To remove a option based on value you can try
$('.selectboxes option[value="0"]').remove() ; // Removes option with value 0

As it's been said, you're trying to find an option within an option, so you'll have to get rid of the .find call.
Apart from that, hiding <option> elements do not work cross-browser, so you'll have to remove the options instead, and add them back when necessary. There are several ways to manage that, all involving storing the full list of options in a variable (as an array, an object, or even HTML string).

Hiding option elements is not always supported. A more idiomatic approach would be to disable it.
obj.prop("disabled", true);
Or simplify it like this.
$(".selectbox option:selected").prop("disabled", true);
Or this.
$(".selectbox").each(function() {
this.options[this.selectedIndex].disabled = true;
});