Hi there i m new here in php so i need a help guys.
I have one input and 2 select option here i want ---- if input is empty than both select are also be empty if input have some value than first select options value should be 'open' and respectively second select value should be 'form distributed' like this, here the both select are working fine but not following by input field any help will be gratfull thank you
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function configureDropDownLists(ddl1,ddl2) {
var Open = new Array('Form Distributed');
var Completed = new Array('Ready for billing', 'Completed');
var Pending = new Array('With CS', 'With O&M (Estimate)', 'With Delegate','With Executive Engineer','With Consumer (Payment)','With O&M (Connection)');
var Rejected = new Array('Rejected: By CS', 'Rejected: By O&M', 'Rejected: By Delegate','Rejected: By EE','Rejected: Demand Expired','Rejected: By O&M');
switch (ddl1.value) {
case 'Open':
document.getElementById(ddl2).options.length = 0;
for (i = 0; i < Open.length; i++) {
createOption(document.getElementById(ddl2), Open[i], Open[i]);
}
break;
case 'Completed':
document.getElementById(ddl2).options.length = 0;
for (i = 0; i < Completed.length; i++) {
createOption(document.getElementById(ddl2), Completed[i], Completed[i]);
}
break;
case 'Pending':
document.getElementById(ddl2).options.length = 0;
for (i = 0; i < Pending.length; i++) {
createOption(document.getElementById(ddl2), Pending[i], Pending[i]);
}
break;
case 'Rejected':
document.getElementById(ddl2).options.length = 0;
for (i = 0; i < Rejected.length; i++) {
createOption(document.getElementById(ddl2), Rejected[i], Rejected[i]);
}
break;
default:
document.getElementById(ddl2).options.length = 0;
break;
}
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
</script>
</head>
<input type="text" name="date" id="datepicker">
<select id="ddl" onChange="configureDropDownLists(this,'ddl2')">
<option value="0" ></option>
<option value="Open">Open</option>
<option value="Completed">Completed</option>
<option value="Pending">Pending</option>
<option value="Rejected">Rejected</option>
</select>
<select id="ddl2">
</select>
</body>
</html>
$(document).ready(function(){
changeInput();
$("#datepicker").change(function(){
changeInput();
});
});
var optios = ['Open','Completed','Pending','Rejected'];
function changeInput(){
var input = $("#datepicker").val();
var ddl = document.getElementById("ddl");
ddl.options.length = 0;
document.getElementById("ddl2").options.length = 0;
if(input==""){
}else{
$.each(optios,function(){
var opt = document.createElement('option');
opt.value = this;
opt.text = this;
ddl.options.add(opt);
});
$("#ddl").val("Open");
configureDropDownLists(ddl,'ddl2');
}
}
Related
I have to make sure the second dropdown menu only starts showing when an option ("Tijd" or "Woorden") is selected in the first one. When no option is selected afterwards, the second dropdown has to hide again.
HTML
<div class="dropdown">
<p>Spelmodus:</p>
<select id="spelmodus" name="spelmodus" onchange="changeSpelmodus(this.value);">
<option></option>
</select>
</div>
<div id="optieDiv">
<p id="tijdWoorden"></p>
<select id="opties" name="opties" onchange="changeOptie(this.value);">
</select>
</div>
JavaScript
var spelmodusOpties = {
"Tijd": [{"Optie": "1 minuut"}, {"Optie": "2 minuten"}, {"Optie": "5 minuten"}],
"Woorden": [{"Optie": "50 woorden"}, {"Optie": "100 woorden"}, {"Optie": "150 woorden"}],
};
function PrepopulateSpelmodus() {
var spelmodusSelect = document.getElementById('spelmodus');
var i = 1;
for (var spelmodus in spelmodusOpties) {
spelmodusSelect.options[i++] = new Option(spelmodus)
}
}
function changeSpelmodus(productNameID) {
var optieSelect = document.getElementById('opties');
optieSelect.innerHTML = '<option></option>'; // Remove previous options
var versions = spelmodusOpties[productNameID];
for (var i = 0; i < versions.length; i++) {
optieSelect.appendChild(new Option(versions[i].Optie));
}
var selectie = document.getElementById('spelmodus').value;
document.getElementById('tijdWoorden').innerHTML = selectie
}
function changeOptie() {
var productNameID = document.getElementById('spelmodus').value;
var versions = spelmodusOpties[productNameID];
for (var i = 0; i < versions.length; i++) {
}
}
PrepopulateSpelmodus();
You just need to validate and hide on change of select
if(!productNameID){
document.getElementById('optieDiv').style.display = "none"
return;
}else{
document.getElementById('optieDiv').style.display = ""
}
var spelmodusOpties = {
"Tijd": [{"Optie": "1 minuut"}, {"Optie": "2 minuten"}, {"Optie": "5 minuten"}],
"Woorden": [{"Optie": "50 woorden"}, {"Optie": "100 woorden"}, {"Optie": "150 woorden"}],
};
function PrepopulateSpelmodus() {
var spelmodusSelect = document.getElementById('spelmodus');
var i = 1;
for (var spelmodus in spelmodusOpties) {
spelmodusSelect.options[i++] = new Option(spelmodus)
}
}
function changeSpelmodus(productNameID) {
if(!productNameID){
document.getElementById('optieDiv').style.display = "none"
return;
}else{
document.getElementById('optieDiv').style.display = ""
}
var optieSelect = document.getElementById('opties');
optieSelect.innerHTML = '<option></option>'; // Remove previous options
var versions = spelmodusOpties[productNameID];
for (var i = 0; i < versions.length; i++) {
optieSelect.appendChild(new Option(versions[i].Optie));
}
var selectie = document.getElementById('spelmodus').value;
document.getElementById('tijdWoorden').innerHTML = selectie
}
function changeOptie() {
var productNameID = document.getElementById('spelmodus').value;
var versions = spelmodusOpties[productNameID];
for (var i = 0; i < versions.length; i++) {
}
}
PrepopulateSpelmodus();
<div class="dropdown">
<p>Spelmodus:</p>
<select id="spelmodus" name="spelmodus" onchange="changeSpelmodus(this.value);">
<option></option>
</select>
</div>
<div id="optieDiv" style="display: none">
<p id="tijdWoorden"></p>
<select id="opties" name="opties" onchange="changeOptie(this.value);">
</select>
</div>
const optieDivEl = document.querySelector('#optieDiv');
function toggleOptieDiv(event) {
// Check if the event.target (select) is one of the specified values
if (['tijd', 'woorden'].includes(event.target.value)) {
// Do no render `div.optieDiv`
optieDivEl.style.display = 'none';
} else {
// Render `div.optieDiv`
optieDivEl.style.display = 'block';
}
}
document.onload = toggleOptieDiv;
document.querySelector('#spelmodus').addEventListener('change', toggleOptieDiv);
<div class="dropdown">
<p>Spelmodus:</p>
<select id="spelmodus" name="spelmodus">
<option value="">--Please choose an option--</option>
<option value="tijd">Tijd</option>
<option value="woorden">Woorden</option>
<option value="other">Other</option>
</select>
</div>
<div id="optieDiv">
<p id="tijdWoorden"></p>
<select id="opties" name="opties" onchange="changeOptie(this.value);">
</select>
</div>
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 want to select an option and get results in the other select with values
<script type="text/javascript">
function configureDropDownLists(ddl1,ddl2) {
var names = ['john', 'jane', 'mike'];
var birth = ['25', '26', '27'];
var animal = ['fish', 'goat', 'cow'];
switch (ddl1.value) {
case 'names':
ddl2.options.length = 0;
for (i = 0; i < names.length; i++) {
createOption(ddl2, names[i], names[i]);
}
break;
case 'birth':
ddl2.options.length = 0;
for (i = 0; i < birth.length; i++) {
createOption(ddl2, birth[i], birth[i]);
}
break;
case 'animal':
ddl2.options.length = 0;
for (i = 0; i < animal.length; i++) {
createOption(ddl2, animal[i], animal[i]);
}
break;
default:
ddl2.options.length = 0;
break;
}
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
</script>
<select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
<option value=""></option>
<option value="names">names</option>
<option value="birth">birth</option>
<option value="animal">animal</option>
</select>
<select id="ddl2">
<option value="#getvalue">#john,jane or mike</option>
<option value="getvalue">#25,26 or 27</option>
<option value="getvalue">#fish, goat or cow</option>
</select>
so i want to set var with there values. so if i select i get results with there values
if there any way i can do it in var like. i appreciate for advice and sample
var names = ['john',value ='', 'jane', value ='', 'mike' value ='', ];
var birth = ['25', value ='', '26', value ='', '27' value ='', ];
var animal = ['fish', value ='', 'goat',value ='', 'cow' value ='', ];
so i want to get values and results
I have an element which is text box but its value is populated from another hidden select element.
<input type="text" id="autocompleteu_17605833" style="box-shadow: none; width: 119px;" class="mobileLookupInput ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
<select id="u_17605833" name="u_17605833" style="visibility: hidden">
<option value="127468">Virginia</option>
<option value="127469">Washington</option>
<option value="127470">West Virginia</option>
<option value="127471">Wisconsin</option>
<option value="127472">Wyoming</option>
</select>
var mySelObju_17605833 = document.getElementById("u_17605833");
$(function () {
var availableTagsu_17605833 = new Array();
for (var i = 0; i < mySelObju_17605833.options.length; i++) {
if (mySelObju_17605833.options[i].text != 'Other') {
availableTagsu_17605833[i] = mySelObju_17605833.options[i].text;
}
}
$("#autocompleteu_17605833").width($(mySelObju_17605833).width() + 5);
availableTagsu_17605833 = $.map(availableTagsu_17605833, function (v) {
return v === "" ? null : v;
});
$("#autocompleteu_17605833").autocomplete({
minLength: 0,
source: function (request, response) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
var a = $.grep(availableTagsu_17605833, function (item, index) {
var items = item.split(" ");
for (i = 0; i < items.length; i++) {
if (matcher.test(items[i])) return matcher.test(items[i]);
}
return matcher.test(item);
});
response(a);
},
close: function (event, ui) {
for (var i = 0, sL = mySelObju_17605833.length; i < sL; i++) {
if (mySelObju_17605833.options[i].text.toLowerCase() == $("#autocompleteu_17605833").val().toLowerCase()) {
mySelObju_17605833.selectedIndex = i;
$("#errorTDu_17605833").html("");
break;
}
mySelObju_17605833.selectedIndex = 0;
$("#errorTDu_17605833").html("Error: Invalid Input");
}
$("#autocompleteu_17605833").trigger("onchange")
}
});
});
$("#autocompleteArrowu_17605833").click(function () {
$("#autocompleteu_17605833").autocomplete("search");
$("#autocompleteu_17605833").focus();
});
$("#autocompleteu_17605833").focusout(function () {
for (var i = 0, sL = mySelObju_17605833.length; i < sL; i++) {
if (mySelObju_17605833.options[i].text.toLowerCase() == $("#autocompleteu_17605833").val().toLowerCase()) {
mySelObju_17605833.selectedIndex = i;
$("#errorTDu_17605833").html("");
break;
}
mySelObju_17605833.selectedIndex = 0;
$("#errorTDu_17605833").html("Error: Invalid Input");
}
$("#autocompleteu_17605833").trigger("onchange")
//$(this).autocomplete("close");
});
I want to find value selected in the hidden select box!
I tried to do the following
$("#autocompleteu_17605833").on("click", function (event) {
$((this.id).substring((this.id).indexOf("_") - 1)).attr("onchange", function (event) {
var selece = this.value;
alert(selece);
});
});
$("#autocompleteu_17605833").next().on("click", function (event) {
var selectedValue = document.getElementById((this.id).substring((this.id).indexOf("_") - 1)).value;
alert("Click on Arrow" + selectedValue);
});
$("#autocompleteu_17605833").on("change", function (event) {
var selectedValue = document.getElementById((this.id).substring((this.id).indexOf("_") - 1)).value;
alert("Changing the value" + selectedValue);
});
what I'm getting is older value where as I need the current assigned value.
How to achieve this??
WORKING DEMO
If am not wrong you want the selected value for this you can use select method
select:function(event,ui) {
alert("You have selected "+ui.item.label);
alert("You have selected "+ui.item.value);
}
This is a simple piece of code that will work as you required.
function result(){
document.getElementById("result").innerHTML= document.getElementById("u_17605833").value;
}
<html>
<head>
</head>
<body>
<div>
<select id="u_17605833" name="u_17605833" >
<option value="127468">Virginia</option>
<option value="127469">Washington</option>
<option value="127470">West Virginia</option>
<option value="127471">Wisconsin</option>
<option value="127472">Wyoming</option>
</select>
<input type="button" value="Show the result" onclick="result()"/>
</div>
<div id="result"></div>
</body>
</html>
i have wriiten javascriot for two levels of dropdown on selecting value in first i get values in second dropdown. now what is happening the value that is there in the array is getting assigned to the second dropdown. i want to assign urls as values to the second dropdown and redirect them to those dropdowns.in my below example if i select apparel then i get men and women in second dropdown so if i select men in second dropdown it should go to xyz.com.... so for each option in second dropdown i want it to be redirected to a specific url how can i do it?
<html>
<head>
<script type="text/javascript">
var categories = [];categories["startList"] = ["Apparel","Books"]
categories["Apparel"] = ["Men","Women"];
categories["Books"] = ["Biography","Fiction","Nonfiction"];
var nLists = 2; // number of lists in the set
function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms[0]['List'+i].length = 1;
document.forms[0]['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
//var nurl= url[currCat]
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}
function getValue(isValue) {
alert(isValue);
}
function init() {
fillSelect('startList',document.forms[0]['List1'])
}
navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
</script>
</head>
<body>
<form action="">
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Make a selection</option>
</select>
<!--<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Make a selection</option>
</select>-->
<select name='List2' onchange="getValue(this.value)">
<option selected >Make a selection</option>
</select>
</form>
</body>
</html>
First you need to modify your source array as JSON format like this :
var categories = [];categories["startList"] = [{"text":"Apparel","url":"Apparel"},{"text":"Books","url":"Books"}]
categories["Apparel"] = [{"text":"Men","url":"xyz.com"},{"text":"Women","url":"abc.com"}];
categories["Books"] = [{"text":"Biography","url":"Biography.com"},{"text":"Fiction","url":"Fiction.com"},{"text":"Nonfiction","url":"Nonfiction.com"}];
Now, In function we can use it as key value pair :
var nLists = 2; // number of lists in the set
function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms[0]['List'+i].length = 1;
document.forms[0]['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
//var nurl= url[currCat]
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]["text"]);
nOption.setAttribute('value',nCat[each]["url"]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}
function getValue(isValue) {
//alert(isValue);
location.replace("http://" + isValue);
}
That's it !!!