I create option dynamically. I bind the all values but when I select value from dropdown menu it not display in the combo box.
help me how to fix this. thanks in advance
HTML:
<select name= "cityNameOption" id = "cityNameOption" >
<option value="0">All</option></select>
js:
// cityList = [{"id":3,"name":"Hospitals"},{"id":1,"name":"Hotels"},{"id":2,"name":"Shopping Mall"}];
var cityObject = jQuery.parseJSON(cityList);
var cityOptions = document.getElementById("cityNameOption");
for ( var i = 1; i <= cityObject.length; i++) {
cityOptions.options[i] = new Option(cityObject[i - 1].name, cityObject[i - 1].id);
}
Try this:
<select name= "cityNameOption" id = "cityNameOption" >
<option value="0">All</option>
</select>
<script type="text/javascript">
//warning 1: js-code must be after HTML
//warning 2: JSON-object must be as a string;
var cityList = '[{"id":3,"name":"Hospitals"},{"id":1,"name":"Hotels"},{"id":2,"name":"Shopping Mall"}]';
var cityObject = $.parseJSON(cityList);
for ( var i = 1; i <= cityObject.length; i++) {
$("#cityNameOption").append('<option value='+cityObject[i - 1].id+'>'+cityObject[i - 1].name+'</option>');
}
</script>
Related
I am working with this code and would like to get the result inside intTotal. But it doesn't give me the result I wish.
window.onload = function() {
var intNum = document.getElementById("intNum");
for (var i = 1; i <= 3000; i++) {
var option = document.createElement("option");
option.innerHTML = i;
option.value = i;
intNum.appendChild(option);
}
};
function jml_total() {
var hrg_sat = parseInt(document.querySelector("hrg_sat").innerHTML);
var jml_pilih = parseInt(document.getElementById("intNum").value);
var int_hitung = hrg_sat * jml_pilih;
document.getElementById("intTotal").value = int_hitung;
}
<div id="hrg_sat">3000</div>
<select id="intNum" onChange="jml_total(this.value)">
<option value="" disabled selected>Pilih Jumlah ... </option>
</select>
<br />
<div id="intTotal"></div>
I tried this thread. Or, you have the simplest one, but not using jquery.
You need to specify that hrg_sat is an id on your querySelector by using # as prefix
var hrg_sat = parseInt(document.querySelector("#hrg_sat").innerHTML);
Also, as the previous answer has mentioned, you need to use innerHTML property instead of value to display the text on the DOM on a <div> element
window.onload = function() {
var intNum = document.getElementById("intNum");
for (var i = 1; i <= 3000; i++) {
var option = document.createElement("option");
option.innerHTML = i;
option.value = i;
intNum.appendChild(option);
}
};
function jml_total() {
var hrg_sat = parseInt(document.querySelector("#hrg_sat").innerHTML);
var jml_pilih = parseInt(document.getElementById("intNum").value);
var int_hitung = hrg_sat * jml_pilih;
document.getElementById("intTotal").innerHTML = int_hitung;
}
<div id="hrg_sat">3000</div>
<select id="intNum" onChange="jml_total(this.value)">
<option value="" disabled selected>Pilih Jumlah ... </option>
</select>
<br />
<div id="intTotal"></div>
Since intTotal is a div, you want to use innerHTML not value. value in the post you linked to is for an input control, not a div
document.getElementById("intTotal").innerHTML = 'your content goes here';
<div id="intTotal"></div>
I have 3 chained select boxes using jquery and json.
Depending on first 2 values I filter third one my code actually works but the problem is when I change values of first 2 select boxes third select recieves new datas while keeping old ones.
I've tried to empty my array but it didn't work.
$(document).ready(function() {
var json = JSON.parse(jsonString);
var makesArray = [];
var selectedyear;
var selectedcourse;
var $yearDropDown = $("#DropDown_Year");
var $course_type = $("#course_type");
$yearDropDown.change(function() {
selectedyear = this.value;
//filter based on selected year.
});
$course_type.change(function(){
selectedcourse = this.value;
makesArray = jQuery.grep(json, function(course, i) {
return course.course_type == selectedcourse && course.year_code == selectedyear;
})
var selectBox = document.getElementById('DropDown_Make');
for(var i = 0, l = makesArray.length; i < l; i++){
var option = makesArray[i];
selectBox.options.add( new Option(option.course_code, option.course_code, option.course_code) );
}
makesArray= []; //makesArray.empty();
});
});
<div id="DrpDwn">
Year:
<select id="DropDown_Year">
<option>Yıl</option>
<option value="15">2015-2016</option>
<option value="16">2016-2017</option>
</select>
<select class="form-control" id="course_type" name="course_type" required>
<option value="" selected> Choose</option>
<option value="Yos">YÖS</option>
<option value="SatMatGeo">SAT (MAT)</option>
<option value="SatCriRea">SAT (ENG)</option>
<option value="TomerABC">TÖMER (ABC)</option>
<option value="TomerAB">TÖMER (AB)</option>
<option value="TomerBC">TÖMER (BC)</option>
<option value="TomerA1A2">TÖMER (A)</option>
<option value="TomerB1B2">TÖMER (B)</option>
<option value="TomerC1C2">TÖMER (C)</option>
</select>
Make:
<select id="DropDown_Make">
<option>None</option>
</select>
</div>
and this is JSFIDDLE
https://jsfiddle.net/rw7cb8c5/25/
Make DropDown_Make empty using selectBox.innerHTML = "" in $course_type.change() like following.
$course_type.change(function () {
selectedcourse = this.value;
makesArray = jQuery.grep(json, function (course, i) {
return course.course_type == selectedcourse && course.year_code == selectedyear;
})
var selectBox = document.getElementById('DropDown_Make');
selectBox.innerHTML = ""; //added this line
for (var i = 0, l = makesArray.length; i < l; i++) {
var option = makesArray[i];
selectBox.options.add(new Option(option.course_code, option.course_code, option.course_code));
}
makesArray.empty();
});
UPDATED FIDDLE
Im stack on creating multiple select options
I have an Object with multi objects inside and want create select options in condition of the previous select option , i provide js fiddle for better understanding .
my objectif is
first select category ----(then)---> select sex -----(then)---> select kind---(then)-->then select size
by this order from that Object.
i could do the select sex and it works but not kind and size.
this is my html
<form name="myform">
<div>
<select name="category_group" id="category_group" >
<option value="0">choose category</option>
<option value='401' > clothes </option>
<option value='403' > shoes </option>
</select>
</div>
<br>
<div>
<select id="clothing_sex" name="clothing_sex" onChange="showclothesKind(this.value,this.form.clothing_kind)">
<option value="0">choose Type»</option>
</select>
<select id="clothing_kind" name="clothing_kind">
<option value="0">choose clothes</option>
</select>
<select id="clothing_size" name="clothing_size">
<option value="0">choose size</option>
</select>
</div>
</form>
and js in the fiddle.
much appreciate your help.
This was kind of fun to play around with. Thanks for posting. I used the following:
var optionTemplate = "<option class='newOption'>sampleText</option>";
$(document).ready(function() {
var removeFromNextSelects = function(firstSelector) {
var selNum = sels.indexOf(firstSelector);
for (var i = selNum; i < sels.length; i++)
{
$(sels[i]).find('.option').remove();
}
};
var populateNextSelect = function(neededObject, targetSelector) {
removeFromNextSelects(targetSelector);
for (var key in neededObject)
{
var name;
neededObject[key].name ? name = neededObject[key].name : name = neededObject[key];
$(targetSelector).append(optionTemplate);
$('.newOption').val(key).html(name).removeClass('newOption').addClass('option');
}
};
var obj1 = {}, obj2 = {}, obj3 = {};
var sels = ["#clothing_sex", "#clothing_kind", "#clothing_size"];
$('#category_group').change(function() {
if ($(this).val() == 0)
{
removeFromNextSelects(sels[0]);
return;
}
obj1 = {};
var selection = $(this).val();
obj1 = clothes[selection];
populateNextSelect(obj1, sels[0]);
});
$('#clothing_sex').change(function() {
if ($(this).val() == 0)
{
removeFromNextSelects(sels[1]);
return;
}
obj2 = {};
var selection = $(this).val();
obj2 = obj1[selection].types;
populateNextSelect(obj2, sels[1]);
});
$('#clothing_kind').change(function() {
if ($(this).val() == 0)
{
removeFromNextSelects(sels[2]);
return;
}
obj3 = {};
var selection = $(this).val();
var arr = obj2[selection].sizes;
for (var i = 0; i < arr.length; i++)
{
obj3[Object.keys(arr[i])[0]] = arr[i][Object.keys(arr[i])[0]];
}
populateNextSelect(obj3, sels[2]);
});
});
Here's the fiddle
i have a problem in html and javascript. i have tried different approach but everything didnt worked. so this is my sample code.
<select id = "testselect" name = "testselect">
<option> </option>
<option id = "o1" name = "testselect" value = "1" onselect='document.getElementById("os1").disabled = true;'> 1 </option>
<option id = "o2" name = "testselect" value = "2" > 2 </option>
<option id = "o3" name = "testselect" value = "3"> 3 </option>
</select>
<div >
<input id = "os1" type="checkbox" name="othser[]" value="7000" />cb1<br/>
<input id = "os2" type="checkbox" name="othser[]" value="7001"/>cb2<br/>
<input id = "os3" type="checkbox" name="othser[]" value="7002"/>cb3<br/>
</div>
ok, that's the code. what i want to happen is, when i selected o1(option id), os1(checkbox id) must be disabled and when i selected o2(option id), os2(checkbox id) must be disabled, and so on. so can anyone help me?
Try this:
Using plain javascript:
var select;
function changeIt() {
var allCheckboxes = document.querySelectorAll('input[type=checkbox]');
for (var i = 0; i < allCheckboxes.length; i++) {
allCheckboxes[i].removeAttribute('disabled');
}
var value = select.options[select.selectedIndex].value;
var checkBox = document.querySelector('input[id=os' + value + ']');
checkBox.disabled = true;
}
window.onload = function () {
select = document.getElementById('testselect');
select.onchange = changeIt;
changeIt();
}
Demo
Using jQuery:
$('select').change(function () {
$('input[type=checkbox]').removeAttr('disabled');
$('input[id=os' + this.value + ']').attr('disabled', true);
});
Demo
My own suggestion would be to move the event-handling outside of the HTML (for ease of future maintenance and change), and take the following approach:
function disableCheck(event) {
// get the element that was the target of the 'change' event:
var that = event.target,
/* find the option tags, and retrieve the option that was selected
from that collection (nodeList) of elements: */
opt = that.getElementsByTagName('option')[that.selectedIndex];
/* find the element whose 'id' is equal to the 'id' of the 'option'
once the 's' is inserted, and set the 'disabled' property to 'true': */
document.getElementById(opt.id.replace('o', 'os')).disabled= true;
}
// bind the onchange event-handler to the element with the id of 'testselect':
document.getElementById('testselect').onchange = disableCheck;
JS Fiddle demo.
To toggle which elements are disabled (rather than simply increase the number of disabled elements):
function disableCheck(event) {
var that = event.target,
opt = that.getElementsByTagName('option')[that.selectedIndex],
idToFind = opt.id.replace('o','os'),
allInputs = document.getElementsByTagName('input');
for (var i = 0, len = allInputs.length; i < len; i++){
if (allInputs[i].type == 'checkbox') {
allInputs[i].disabled = allInputs[i].id === idToFind;
}
}
}
document.getElementById('testselect').onchange = disableCheck;
JS Fiddle demo.
Well, this is ugly...and suggests I really need to rethink the approach above, however it does work (though it doesn't properly support IE as yet). This uses a trigger function which is fired upon the window.load event which triggers the change event from the select element-node:
function trigger(event, source) {
var newEvent;
if (document.createEvent) {
newEvent = document.createEvent("HTMLEvents");
newEvent.initEvent(event, true, true);
} else {
newEvent = document.createEventObject();
newEvent.eventType = event;
}
newEvent.eventName = event;
if (document.createEvent) {
source.dispatchEvent(newEvent);
} else {
source.fireEvent("on" + newEvent.eventType, newEvent);
}
}
function disableCheck(event) {
var that = event.target,
opt = that.getElementsByTagName('option')[that.selectedIndex],
idToFind = opt.id.replace('o', 'os'),
allInputs = document.getElementsByTagName('input');
for (var i = 0, len = allInputs.length; i < len; i++) {
if (allInputs[i].type == 'checkbox') {
allInputs[i].disabled = allInputs[i].id === idToFind;
}
}
}
window.addEventListener('load', function(){
trigger('change', document.getElementById('testselect'));
});
document.getElementById('testselect').onchange = disableCheck;
JS Fiddle demo.
onselect should go into the select
<script>
function onSelect(obj){
var x = document.getElementsByName("othser[]");
for (var i in x) x[i].disabled = false;
document.getElementById("os"+obj.value).disabled=true;
}
</script>
<select id = "testselect" name = "testselect" onchange='onSelect(this)'>
<option> </option>
<option id = "o1" name = "testselect" value = "1" > 1 </option>
<option id = "o2" name = "testselect" value = "2" > 2 </option>
<option id = "o3" name = "testselect" value = "3"> 3 </option>
</select>
<div >
<input id = "os1" type="checkbox" name="othser[]" value="7000" />cb1<br/>
<input id = "os2" type="checkbox" name="othser[]" value="7001"/>cb2<br/>
<input id = "os3" type="checkbox" name="othser[]" value="7002"/>cb3<br/>
</div>
Basically, I want to create more then 1, dropdowns, which contains numbers as value eg.
<select id="dp1">
<option value='op1'>1</option>
<option value='op2'>2</option>
<option value='op3'>3</option>
</select>
<select id="dp2">
<option value='op1'>1</option>
<option value='op2'>2</option>
<option value='op3'>3</option>
</select>
<select id="dp3">
<option value='op1'>1</option>
<option value='op2'>2</option>
<option value='op3'>3</option>
</select>
this is just one dropdown. lets say I have 3 dropdown lists with same numbers with different default value eg. dp1 -> 1, dp2 -> 2, dp3 -> 3 . So, Now if user changes value of dp3 to 1 the value of other dropdown list should get change automatically as per sequence like dp1 -> 2 and dp2 -> 3.
if i explain it with other example if user changes value of dp3 to 2 the value dp1 should not change and value of dp2 -> 3should change.
How is it possible to do using Javascript / jquery. (I am using php to populate dropdown from database)
Thank you in advance.
if you just want to change the previous dropdownlists buy changing the current dropdownlist maybe this sample code can help you :
$("select").change(function(){
var selectValue = $(this).val();
var toRemove = 'op';
var value = selectValue.replace(toRemove,'');
var selectId = $(this).attr('id');
var toRemove = 'dp';
var id = selectId.replace(toRemove,'');
id = id-1;
for(var i = id; i>=1; i--){
value = value -1;
var newValue = "op"+value;
$("#dp"+i).val(newValue);
}
});
If the data you're using is really just numeric, then something like this will work. Click here for a jsfiddle example that demonstrates the behavior I think you're looking for.
<select id="dp1" class="dropdown"></select>
<select id="dp2" class="dropdown"></select>
<select id="dp3" class="dropdown"></select>
<script type="text/javascript">
var values = [1, 2, 3];
$(function() {
initDropdowns();
$('select.dropdown').change(function() {
setDropdownValues($(this).attr('id'));
});
});
function initDropdowns() {
var optionsHtml = '';
for(var i = 0; i < values.length; i++) {
var value = values[i];
optionsHtml += '<option value="' + value + '">' + value + '</option>';
}
$('select.dropdown').append(optionsHtml);
setDropdownValues();
}
function setDropdownValues(excludeListId) {
var valuesClone = values.slice();
var $dropdowns = $('select.dropdown');
if(excludeListId) {
valuesClone.splice(Number($('#' + excludeListId).val()) - 1, 1);
}
$('select.dropdown').each(function() {
if($(this).attr('id') !== excludeListId) {
$(this).val(valuesClone[0]);
valuesClone.splice(0, 1);
}
});
}
</script>