i have one div for duel multiselect of provinces list which when i click on every option it is moved to another box(user can select several provinces).
and another div for duel multiselect of districts.
<div>
<select multiple class="multiselect" id="province" name="province">
<?PHP foreach($provinces->result() as $province){ ?>
<option value="<?=$province->id?>"><?=$province->name?></option>
<?PHP } ?>
</select>
</div>
<div id="district_div">
<select multiple class="multiselect" id="district" name="district" >
</select>
</div>
the list of province is correct and user can select multi provinces.
but what i need is an onchange in province select tag to bring the districts of selected province and put them in district_div.
i have the ajax for onchange to bring the districts:
function bring_page(page,name,id,divname,str)
{
var dropdownIndex = document.getElementById(name).selectedIndex;
var dropdownValue = document.getElementById(name)[dropdownIndex].value;
var url=page;
var params='&'+id+'='+dropdownValue+'&'+str;
//call ajax
makerequest_sp(url, params, divname);
}
the function bring_page is correct and work for normal select.
i think the problem is with bootstrap.
i am using plugins of bootstrap.
thanks for help
You need to get the values of the options in a loop because you will have multiple. I don't know how your backend is expecting the data, but something like this could work.
function bring_page(page, name, id, divname, str) {
var url=page;
var params = "&" + id +"=";
var dropdown = document.getElementById(name);
var options = dropdown.options;
var values = [];
for (var i = 0; i < options.length; i++) {
if (options[i].selected) {
values.push(options[i].value);
}
}
params += values.join(",");
//call ajax
makerequest_sp(url, params, divname);
}
Related
For my code i need 2 selects, the first select is static (4 options that dont change) and the second select is dependant on what is selected in the first select.
Then depending on what is chosen in de the second list a function is executed.
i found some example code one W3schools that allow me to make the whole list thing:
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_select_options3
So this works really well but now i dont know how to attach a function to the selected options in the second select since there is no where in the html to do something like an onchange.
Each option from the second select should have a function (in my code the selected option will display an image corresponding with the chosen option)
<!DOCTYPE html>
<html>
<body>
<select id="car" onchange="ChangeCarList()">
<option value="">-- Car --</option>
<option value="VO">Volvo</option>
<option value="VW">Volkswagen</option>
<option value="BMW">BMW</option>
</select>
<select id="carmodel"></select>
<script>
var carsAndModels = {};
carsAndModels['VO'] = ['V70', 'XC60', 'XC90'];
carsAndModels['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
carsAndModels['BMW'] = ['M6', 'X5', 'Z3'];
function ChangeCarList() {
var carList = document.getElementById("car");
var modelList = document.getElementById("carmodel");
var selCar = carList.options[carList.selectedIndex].value;
while (modelList.options.length) {
modelList.remove(0);
}
var cars = carsAndModels[selCar];
if (cars) {
var i;
for (i = 0; i < cars.length; i++) {
var car = new Option(cars[i], i);
modelList.options.add(car);
}
}
}
</script>
</body>
</html>
I am adding dropdowns dynamically by code it is rendered in browser like
<select id="contact-type1"></select>
<select id="contact-type2"></select>
...
Now I am trying the below code for dynamically selecting nth number of dropdown in order to fill option values in them.
function fillContactTypes()
{
var types = ["Phone","Whatapp","Facebook","Web","Fax"];
var select = document.getElementById('contact-type[*n]');
for(var i = 0; i < types.length; i++)
{
var option = document.createElement('option');
option.innerHTML = types[i];
option.value = types[i];
select.appendChild(option);
}
}
Please help me in the line "var select = document.getElementById('contact-type[*n]');
".
I have just added common class to all dropdowns and using jquery you can dynamically bind all dropdown as shown below.
var types = ["Phone","Whatapp","Facebook","Web","Fax"];
$(document).ready(function(){
fillContactTypes()
});
function fillContactTypes(){
var myselect = $('<select>');
$.each(types, function(index, key) {
myselect.append( $('<option></option>').val(key).html(key) );
});
$('.contact-type').append(myselect.html());
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>
<select id="contact-type1" class="contact-type">
</select>
<select id="contact-type2" class="contact-type">
</select>
<select id="contact-type3" class="contact-type">
</select>
<select id="contact-type4" class="contact-type">
</select>
I have the following HTML code that allows me to select two items from select dropdown options;
Now, after selecting the two items, say, I select accommodation as my form and Kampala as my district, I want the total number of available possible results, for example, "25 results were found", to be automatically displayed.
The problem I have is that only the results for one selection are displayed with the other being shown as undefined notice. Any assistance please.
<!-- here is the html script for selecting options -->
<form id="analysis_formId" method="POST">
<label>select form</label>
<select id="selectformId" name="selectform" class="select_elements">
<option value="afc">accommodation form</option>
<option value="rtt">tour and travel form</option>
</select>
<label>select district</label>
<select id="selectdistrictsId" name="selectdistricts" class="select_elements">
<option value="alldistricts">All districts</option>
<option value="kampala">kampala</option>
<option value="wakiso">wakiso</option>
</select>
</form>
<!-- displaying results from count.php -->
<p><span id="inspection_result"></span></p>
This the script that gets the class names of the select elements and runs the onChange event.
<script>
var selections = document.getElementsByClassName("select_elements");
function onchangefunction(){
var selectedstring = (this.options[this.selectedIndex].value);
$("#inspection_result").html('checking...');
$.ajax({
type:'POST',
url:'count.php',
data:$(this).serialize(),
success:function(data)
{
$("#inspection_result").html(data);
}
});
}
for (var i = 0, l = selections.length; i < l; i++) {
selections[i].onchange = onchangefunction;
}
</script>
Here is count.php for querying the results from MySQL
if($_POST)
{
$formtype = strip_tags($_POST['selectform']);
$selectdistricts = strip_tags($_POST['selectdistricts']);
$fetchallforms22 = $conn->prepare("select count(indexId) as numafcrtt2
from registered_companies where company_form_type=:formtype and company_district=:selectdistricts");
$fetchallforms22->execute(array(':formtype'=>$formtype, ':selectdistricts'=>$selectdistricts));
$display22 = $fetchallforms22->fetchObject();
if($display22){
echo $display22->numafcrtt2." "."results available";
}
else
{
echo $display22->numafcrtt2." "."results available";
}
}//POST
Maybe no results for this query, chech it:
if (!empty(display2) ){
..... // DO something
}
I implement jquery multiselect and its working properly now i need to add extra feature that when a user select another option in dropdown ( check another checkbox ) then i want to get the value of the related option
in above picture in did not insert checkbox it is automatically inserted by jquery now i want that if i select the check =box with XYZ then i want to get the value of XYZ which is the id of XYZ
here is how i implemented it
<select multiple="multiple" id="CParent" name="parent" class="box2 required">
#foreach (var item in Model.Categories.OrderBy(c => c.Name))
{
if (Model.Coupon.Categoryid.Id == item.Id)
{
<option selected="selected" value="#item.Id">#item.Name</option>
}
else
{
<option value="#item.Id">#item.Name</option>
}
}
</select>
and it is how it looks like after rendering in browser source
Thanks in advance for helping me .
what i tried yet
$('#CParent input:checked').change(function () {
var parentid = $(this).val()+'';
var array = parentid.split(",");
alert(array);
getchildcat(array[array.length -1]);
});
});
Edit
Code to initialize multiselect
$("#CParent").multiselect({
header: "Choose only THREE items!",
click: function () {
if ($(this).multiselect("widget").find("input:checked").length > 3) {
$(warning).show();
warning.addClass("error").removeClass("success").html("You can only check three checkboxes!");
return false;
}
else if ($(this).multiselect("widget").find("input:checked").length <= 3) {
if ($(warning).is(":visible")) {
$(warning).hide();
}
}
}
});
try this
$('#CParent').val();
this will give you the selectbox value
OR
from docs
var array_of_checked_values = $("#CParent").multiselect("getChecked").map(function(){
return this.value;
}).get();
I'm integrating Postcode anywhere with my web project. I'm using a drop drop for the county/state field. Postcode anywhere returns the name of the County. Can I change the Selected Index when I only have the name? (I'm using a number for the value field which relates to a database field).
I tried the following:
var f = document.getElementById("state_dropdown");
f.options.[f.selectedIndex].text = response[0].County;
I've tried to include the drop down code html here but I can't get it to work properly for some reason.
But of course this just changes the text field for the item in the drop down that is already selected.
I can query the database and find out what ID I have assigned the county but I'd rather not if there is another way.
Loop over the options until you have a match:
for (var i = 0; i < f.options.length; i++) {
if (f.options[i].text == response[0].Country) {
f.options.selectedIndex = i;
break;
}
}
Demo.
I would make a function and loop over the labels:
See: http://jsfiddle.net/Y3kYH/
<select id="country" name="countryselect" size="1">
<option value="1230">A</option>
<option value="1010">B</option>
<option value="1213">C</option>
<option value="1013">D</option>
</select>
JavaScript
function selectElementByName(id, name) {
f = document.getElementById(id);
for(i=0;i<f.options.length;i++){
if(f.options[i].label == name){
f.options.selectedIndex = i;
break;
}
}
}
selectElementByName("country","B");
Just a variation on other answers:
<script type="text/javascript">
function setValue(el, value) {
var sel = el.form.sel0;
var i = sel.options.length;
while (i--) {
sel.options[i].selected = sel.options[i].text == value;
}
}
</script>
<form>
<select name="sel0">
<option value="0" selected>China
<option value="1">Russia
</select>
<button type="button" onclick="setValue(this, 'Russia');">Set to Russia</button>
<input type="reset">
</form>