We Keep Coding

I want to disabled remaining select options from my dropdown of select2() library

I want to disable remaining select options from my dropdown of select2() library but I can't. I am generating a dynamic list of some brands in which I have some values like "All brands", "Honda", "Accord" etc., I want to disable all the select options if a user checks "all brands".
How can I do this?
Here's my jQuery code:
$("select.select2").change(function () {
var selectedCountry = $(this).val();
if (selectedCountry == 'all_brands') {
$("dynamicList").prop("disabled", true)
}
});
And this is my HTML & PHP code:
<label class="text-danger">Select Brands</label>
<select class="form-control select2" id="brandAll" multiple="multiple" name="brand_id" data-placeholder="Select Brand to Deal" style="width: 100%;">
<option value="all_brands" id="checking123">All Brands</option>
<?php
foreach ($brand_list as $brand) {
echo "<option value='$brand->id' class='dynamicList'>$brand->name</option>";
}
?>
</select>

In order to disable element using class selector try this:
$(".dynamicList").attr('disabled','disabled');
Note: this will disable all options, probably you would need to exclude the option with `"All Brands"``
$(".dynamicList").attr('disabled','disabled');
$("#checking123").removeAttr('disabled');
Bug #1 you are using multiple="multiple" then $(this).val() returns an array, not a single value.
Bug #2 you need to fix class selector: dynamicList -> .dynamicList
Here is the full code:
$("select.select2").change(function (){
var selectedCountry = $(this).val();
if (selectedCountry.length > 0 && selectedCountry[0] == 'all_brands') {
$(".dynamicList").attr('disabled','disabled');
}
});
Edit:
I would recommend to fix also html style, use double quotes for attributes:
echo '<option value="' . $brand->id . '" class="dynamicList">' . $brand->name . '</option>';
or even like this:
<label class="text-danger">Select Brands</label>
<select class="form-control select2" id="brandAll" multiple="multiple" name="brand_id" data-placeholder="Select Brand to Deal" style="width: 100%;">
<option value="all_brands" id="checking123">All Brands</option>
<?php foreach ($brand_list as $brand) { ?>
<option value="<?php echo $brand->id ?>" class="dynamicList"><?php echo $brand->name ?></option>
<?php } ?>
</select>

Type feature is not available in select dropdown

I have a select dropdown with search option that displays dynamic data,its working fine,but i need to add one more feature like if the user types anything and it is not available in the option then he should be allowed to simply type and provide an input. it should not be like this that if the user's desired value is not in dropdown then he is not able to type also
The link that i am following for dropdown is this
Here is my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" />
<select name="ddlCountry" id="Select1" class="selectpicker" data-live-search-style="begins" data-live-search="true">
<?php foreach($location as $loc): ?>
<option value="<?php echo $loc->city.', '.$loc->state;?>" ><?php echo $loc->city.', '.$loc->state;?></option>
<?php endforeach; ?>
</select>
Can anyone please give me any suggestions,
Thanks in advance.

You can use the html5 datalist feature to achieve this functionality,
<input name="ddlCountry" id="Select1" class="selectpicker" data-live-search-style="begins" data-live-search="true" >
<datalist id="Select1">
<?php foreach($location as $loc): ?>
<option value="<?php echo $loc->city.', '.$loc->state;?>" ><?php echo $loc->city.', '.$loc->state;?></option>
<?php endforeach; ?>
</datalist>

The solution requires you to capture the input as the user is typing, the other issue with the above solution, it is tricky to use select and options, instead, use input type text as in the below code.
The below code needs a bit of tweaking.
Html and PHP
<input list="select1" name="ddlCountry" class="selectpicker" data-live-search-style="begins" data-live-search="true" /><
<datalist id="select1">
<?php foreach($location as $loc): ?>
<option value="<?php echo $loc->city.', '.$loc->state;?>" ><?php echo $loc->city.', '.$loc->state;?>
<?php endforeach; ?>
</datalist>
Every time the user enters the data, we need a way to capture the new entry
AJAX and Javascript
$(document).ready(function() {
$(document).on('keyup', 'input[name="ddlCountry"]', function() {
alert($('input[name="ddlCountry"]').val());
$.ajax({
url: "{PHP url}",
method: "GET",
data: {
search: $('#Select1 option:selected').val()
},
})
.done(function(data) {
//assuming the data is returned as an array
var tmp_variable = '';
data.foreach(function(item) {
tmp_variable = tmp_variable + '<option value="' + item + '">';
})
$('#select1').html(tmp_variable);
});
});
})

how to hide original dropdown list in select2

I want to use select2 for my dropdown list. The options are from a database query. What I got is there are two dropdown lists showing. The first one is the original dropdown and the second is using select2.
The select code is:
<select name="city" id="select-city" class="form-control">
<option></option>
<?php foreach ($cities as $ct) : ?>
<option value="<?php echo $ct->id ?>"><?php echo $ct->name ?></option>
<?php endforeach; ?>
</select>
And the javascript is:
<script>
$(document).ready(function () {
$("#select-city").select2();
});
</script>
I want to hide the original dropdown. How can I do this?

php html form select option to populate text field jquery

I'm editing a wordpress plugin:
It currently has a dropdown option list for a user, and based on that user, I want to fill a text field with that users email.
selection option dropdown:
<div>
<label for="Customer_ID"></label>
<select name="Customer_ID" id="Customer_ID" />
<option value='0'>None</option>
<?php foreach ($Customers as $Customer) { ?>
<option value='<?php echo $Customer->Customer_ID; ?>'><?php echo $Customer->Customer_Name; ?></option>
<?php } ?>
</select>
</div>
The customer email is stored in $Customer->Customer_Email
And Im trying to fill in the following value when a user changes the selected user:
<div class="form-field">
<label for="Order_Email"></label>
<input type='text' name="Order_Email" id="Order_Email" />
</div>
I've played around with filling the Order_Email with the following script, but it just sents the value as the customer_id. How do I change the value to the email
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#Customer_ID').on('change', function () {
var selection = $(this).val();
$('#Order_Email').val(selection);
});
});
</script>

You could just add a title attribute to the options to equal whatever the email value is:
Play around with it here: http://jsfiddle.net/7BUmG/3876/
This might not be the best solution and hacky, but it should do the trick. This will also break after the plugin is updated
<div>
<label for="Customer_ID"></label>
<select name="Customer_ID" id="Customer_ID" />
<option value='0'>None</option>
<?php foreach ($Customers as $Customer) { ?>
<option title='<?php echo $Customer->Customer_Email; ?>'value='<?php echo $Customer->Customer_ID; ?>'><?php echo $Customer->Customer_Name; ?></option>
<?php } ?>
</select>
</div>
and
$(document).ready(function(){
$('#Customer_ID').change(function() {
var email = $(this).find("option:selected").attr("title");
$('#Order_Email').val(email);
});
});

Form fields stability when using jquery to create the form

I am using json to fill the options of select tag, when I choose the country, system synchronously fill the combobox of cities
<label class="AddressLable">الدوله</label>
<select name="country" id="countryCB">
<option >اختر</option>
<?php $cntr=0;
while($cntr < count($countries))
{
?>
<option value="<?php echo $countries[$cntr]['countryNo']?>" <?php echo $_POST['country']==$countries[$cntr]['countryNo']?'selected':''?>> <?php echo $countries[$cntr]['countryName'];?></option>
<?php
$cntr++;
}
?>
</select>
<label class="AddressLable">المدينة</label>
<select name="city" id="cityCB">
</select>
//here is the jquery script
$("#countryCB").change(function(){
var countryNo=$(this).val();
var param={"action":"getCities",
"countryNo":countryNo
};
$.getJSON("controllers/Customer.controller.php",param,function(result){
input=$("#cityCB");
$('>option',input).remove();
$("#cityCB").append('<option> اختر</option>');
$.each(result,function(i,val){
var option = $('<option />');
option.attr("value",val.cityNo);
option.text(val.cityName);
$("#cityCB").append(option);
})
});
How can I make something like this:
<?php echo $_POST['country']==$countries[$cntr]['countryNo']?'selected':''?>
in jquery?

$("cityCB option[value='your_value']").attr("selected", true);
Run it after you append all of the options.