<select id="gameid">
//<option is a number 1-999>
</select>
<select id="netid">
//<option is a number 1-999>
</select>
<select id="camp_id">
<script>
var a = $("#gameid").val();
var b = $("#netid").val();
var c = a+b;
for (var i = 1; i<=999; i++)
{
document.write("<option value='"+c+i+"'>"+c+i+"</option>");
}
</script>
</select>
The code above is to generate some options into selection.
What I want to do there is, if the val in the #gameid is changed, the option list will change too, and so does for the #netid.
However, the option doesn't change. It stay in the default value of the #gameid and #netid.
I don't know what I am missing here. I need a help, please.
[UPDATE]
This code almost work. However, when I do the second change on the #cameid after all I have been select, it doesn't change the #campid selection anymore. It will do change it again if I do the change too on the #netid.
$("#gameid" && "#netid").on('change', function(){
a = $("#gameid").val(),
b = $("#netid").val(),
c = a+b;
$("#camp_id").empty();
for (var i = 1; i<=999; i++){
$("#camp_id").append("<option value='"+(c+i)+"'>"+(c+i)+"</option>");
}
});
Use something like this:
var options = '';
for (var i = 1; i<=999; i++)
{
options += "<option value='"+c+i+"'>"+c+i+"</option>";
}
document.getElementById('camp_id').innerHTML = options;
Use similar to insert options to other select boxes if needed
Don't forget to add Jquery library,
<select id="gameid" onchange="generateOptions();">
<!-- Your Options -->
</select>
<select id="netid" onchange="generateOptions();">
<!-- Your Options -->
</select>
<select id="camp_id">
</select>
<script type="text/javascript">
var a,b,c,str="";
function generateOptions()
{
a = $("#gameid").val();
b = $("#netid").val();
c = a+b;
for (var i = 1; i<=999; i++)
{
str= str + "<option value='"+c+i+"'>"+c+i+"</option>";
}
$('#camp_id').html(str);
}
</script>
var a = $("#gameid").val(),
b = $("#netid").val(),
c;
$("#gameid").change(function(){
a = $(this).val();
c = parseInt(a)+parseInt(b);
$("#camp_id").empty();
for (var i = 1; i<=999; i++){
$("#camp_id").append("<option value='"+(c+i)+"'>"+(c+i)+"</option>");
}
});
https://jsfiddle.net/partypete25/j9toh39c/
Use change event
$('#gameid,#netid').on('change',function (){
var a = $("#gameid").val();
var b = $("#netid").val();
alert($(this).attr('id'));
var c = parseInt(a)+parseInt(b);
if ( $(this).attr('id') == 'gameid') {
$el = $("#netid");} else {$el = $("#gameid")};
$el.text('');
for (var i = 1; i<=999; i++)
{
$el.append("<option value='"+(c+i)+"'>"+(c+i)+"</option>");
}
});
note: I used jquery, jsfiddle: https://jsfiddle.net/1zgre9pw/4/
As you want to add options to HTML select dynamically. I have tried to achieve the same using jquery i.e. to be call on $('#gameid').populate();.
Firstly, Add jquery library in <head> of page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>`
WORKING DEMO
$.fn.populate = function () {
var $this = $(this);
for (var i = 1; i<=999; i++){
$this.append("<option value='"+(c+i)+"'>"+(c+i)+"</option>");
}
}
$('#gameid').populate();
You can add same for second select(drop-down) as well.
Related
with vanilla javascript I'd like to loop through my dropdown, and change the selected one, and then change the text that is displayed. I have it selecting, but I'm not getting the object name correct to change the optionText? of the item.
var textToFind = 'LdapUsers';
var dd = document.getElementById('membershipProvider');
for (var i = 0; i < dd.options.length; i++) {
if (dd.options[i].text === textToFind) {
dd.selectedIndex = i;
i.options.text = "Edgewood Login"; //This is WRONG
break;
}
}
guidance is appreciated.
You can use a querySelector and a selector to access it without a loop.
v = "222";
selProvider = document.querySelector("#membershipProvider option[value='" + v + "']");
if (selProvider) {
selProvider.text = "CHANGED!";
selProvider.selected = true;
}
<select id="membershipProvider">
<option value='111'>AAA</option>
<option value='222'>BBB</option>
</select>
You need to modify the option at that index. Right now you are trying to modify the index itself.
should be:
dd.options[i].text
not
i.options.text
var textToFind = 'LdapUsers';
var dd = document.getElementById('membershipProvider');
for (var i = 0; i < dd.options.length; i++) {
if (dd.options[i].text === textToFind) {
dd.selectedIndex = i;
dd.options[i].text = "Edgewood Login"; //This is WRONG
break;
}
}
<select id="membershipProvider">
<option value="cifs">CIFS</option>
<option value="LdapUsers">LdapUsers</option>
<option value="nfs">NFS</option>
<option value="test">Test</option>
</select>
You should use
dd.options[i].text = "Edgewood Login";
just like when checking for its value
I am trying to make auto complete to select option according to input from the user
something like
<input type=text onkeyup=findit()>
<select id="sel">
<option value="s0001">Adams</option>
<option value="s0002">Alder</option>
.
.
.
<select>
I found this code 'but it only work on one select in the page( I need multi select)
<html>
<head>
<script type="text/javascript">
//initialize some global variables
var list = null;
function fillit(sel,fld) {
var field = document.getElementById("entry");
var selobj = document.getElementById("sel");
if(!list)
{
var len = selobj.options.length;
field.value = "";
list = new Array();
for(var i = 0;i < len;i++)
{
list[i] = new Object();
list[i]["text"] = selobj.options[i].text;
list[i]["value"] = selobj.options[i].value;
}
}
else
{
var op = document.createElement("option");
var tmp = null;
for(var i = 0;i < list.length;i++)
{
tmp = op.cloneNode(true);
tmp.appendChild(document.createTextNode(list[i]["text"]));
tmp.setAttribute("value",list[i]["value"]);
selobj.appendChild(tmp)/*;*/
}
}
}
function findIt(sel,field)
{
var selobj = document.getElementById("sel");
var d = document.getElementById("display");
var len = list.length;
if(field.value.length > 1)
{
if(!list)
{
fillit(sel,field);
}
var op = document.createElement("option");
selobj.options.length = 1
var reg = new RegExp(field.value,"i");
var tmp = null;
var count = 0;
var msg = "";
for(var i = 0;i < len;i++)
{
if(reg.test(list[i].text))
{
// d.childNodes[0].nodeValue = msg;
tmp = op.cloneNode(true);
tmp.setAttribute("value",list[i].value);
tmp.appendChild(document.createTextNode(list[i].text));
selobj.appendChild(tmp);
}
}
}
else if(list && len > selobj.options.length)
{
selobj.selectedIndex = 0;
fillit(sel,field);
}
}
</script>
</head>
<body onLoad="fillit(sel,entry)">
<div>Enter the first three letters of a street and select a match from the menu.</div>
<form>
Street
<input type="text" name="Street" id="entry" onKeyUp="findIt(sel,this)"><br>
<select id="sel">
<option value="s0001">Adams</option>
<option value="s0002">Alder</option>
<option value="s0003">bol</option>
<option value="s0004">col</option>
<option value="s0005">dol</option>
<option value="s0007">Cooper</option>
<!--and so on and so forth-->
</select>
</form>
</body>
Any Ideas How to make it work on multi select on the page?
Thanks
Baaroz
Not sure if this would work for you, but chosen.js has a really nice autocomple multi select
http://harvesthq.github.com/chosen/
Usually Autocomplete is for single values, but the jQuery UI autocomplete does have a multiple select function. Perhaps try that? Minimum effort coding for you that way.
An odd way to do that is to change the ID in the script and copy it the number of times you want to use this options in the page. so for example:
select id="sel1"
select id="sel2"
select id="sel3"
and then. copy the script and replace every (sel) with sel1 past it again and replace (sel) with sel2 and so on.
not the best solution but it will work.
Good Luck
My HTML code is:
<div data-role="fieldcontain"style="padding:0; margin:0; padding-top:0px;">
<div style = "margin-top:-5px">
<select name="selectmenue1" id="sm" data-native-menu = "false" multiple = "multiple" >
<option value="1" selected="selected">iOS</option>
<option value="2">Android</option>
<option value="3">BlackBerry</option>
<option value="4">Others</option>
</select>
</div>
</div>
and I am using this Javascript function to get a sum of selected values:
function check_sm()
{
var c_value = 0;
for (var i=0; i < document.myform.sm.length; i++)
{
if (document.myform.sm[i].checked)
{
c_value = (eval(c_value) + eval(document.myform.sm[i].value));
}
}
alert(c_value);
}
function is not working. need some suggestions.
Using selected should solve your problem. See below code
function check_sm() {
var c_value = 0;
var sm1 = document.getElementById("sm");
for (var i = 0; i < sm1.length; i++) {
if (sm1[i].selected)
{ c_value = (eval(c_value) + eval(sm1[i].value)); }
} alert(c_value);
}
Do you mean:
var c_value = 0;
function check_sm() {
var Selected = document.myform.selectmenue1.selectedIndex;
var selectedVal = document.myform.selectmenue1.options[Selected].value;
selectedVal = parseInt(selectedVal, 10);
c_value +=selectedVal;
alert(c_value);
}
I don't think there is "checked" property available in select element. You have to use .selected property to find out whether option is selected or not, something like -
function getSum(){
var sm = document.getElementById("sm");
var sum = 0;
for(var i=0;i<sm.options.length;i++)
{
if(sm.options[i].selected){
sum+=parseInt(sm.options[i].value);
}
}
alert(sum);
}
You can do better using jquery:-
$("select").change(function () {
var count = 0;
$("select option:selected").each(function () {
count = Number(count) + Number($(this).val());
});
alert(count);
}).change();
I have a drop down box where the options are coming from the configured properties file.The options are generated on load of the page.I have used the following code.
In JSP
<select name="IDNo" id="IDNo">
</select>
function loading()
{
var d = document.getElementById("system");
var df=document.getElementById("IDNo");
var i = 0;
var disp = document.getElementById("Range");
var numberOfOptions = df.options.length;
for (i = 0; i < numberOfOptions; i++) {
df.remove(0);
}
if (d.value == "Apple") {
df.options[df.options.length] = new Option("ALL","");
for(i=1;i<=disp.value;i++)
{
var option = document.createElement("option");
option.text=i;
option.value=i;
df.add(option, df.options[null]);
}
}
Add something like the following at the end of the code:
<c:if test="${!empty param.IDNo}">
for (var i = 0; i < df.options.length; i++) {
if (df.options[i].value == '${param.IDNo}') {
df.selectedIndex = i;
break;
}
}
</c:if>
Use the simple java script function to set selected value of combo or drop down box in the other page
function setSelected()
{
var Num = "<%=NumID%>";
if(Num != null && Num !='' )
{
var secondCombo = document.getElementById("combo_id");
secondCombo.value = Num;
}
}
On a old project I use jQuery v1.7.1 and Chosen 0.9.8 (updated to 0.9.10 but nothing changes).
I have some SELECT each with 21 options, and I need to select / unselect some options with JavaScript every time the user clicks on a checkbox.
I do it and I see the changes inspecting the page.
I don't see anything changing in the SELECT, like trigger("liszt:updated") does nothing.
Any Idea?
Here is the HTML (simplyfied):
#for (int i = 0; i < Model.SoasEsitiLavori.Count(); i++)
{
SoaModel soa = Model.SoasEsitiLavori[i];
<tr>
<td>
<select id="SoasEsitiLavori[#i]._RegioniEsiti" multiple="multiple"
name="SoasEsitiLavori[#i]._RegioniEsiti"
class="regionilavori chzn-select" >
#foreach (XRegione reg in ViewBag.ElencoRegioni)
{
<option value="#reg.IDRegione">#reg.Regione</option>
}
</select>
</td>
</tr>
}
Here is the Javascript (simplyfied):
function CheckRegioneClick(RegioneCheck) {
var CurrentChecked = RegioneCheck.checked;
var CurrentValue = RegioneCheck.value;
//Extracts a list of "SELECT"
var regioni = document.getElementsByClassName('regionilavori');
for (z = 0; z < regioni.length; z++) {
var r = regioni[z];
var r1 = document.getElementById(r.id);
var ao = r1.getElementsByTagName('option');
for (var i = 0; i < ao.length; i++) {
if (ao[i].value == CurrentValue) {
ao[i].selected = CurrentChecked;
//This SHOULD update the SELECT, but nothing happens
$(r.id).trigger("liszt:updated");
}
}
$(r.id).trigger("liszt:updated");
$(r.id).val(CurrentValue).trigger("liszt:updated");
}
}
}
How can i force the SELECT to refresh?
You can use $('select').trigger('chosen:updated');
for further reference please check
https://harvesthq.github.io/chosen/options.html
Your issue is here:
$(r.id)
The right jQuery selector by ID need a pound prefix, hence:
$('#' + r.id)
$("#RegioniEsiti").chosen();
var regioni = document.getElementsByClassName('regionilavori');
var CurrentChecked = true;
var CurrentValue = '1';
for (z = 0; z < regioni.length; z++) {
var r = regioni[z];
var r1 = document.getElementById(r.id);
var ao = r1.getElementsByTagName('option');
for (var i = 0; i < ao.length; i++) {
if (ao[i].value == CurrentValue) {
ao[i].selected = CurrentChecked;
//This SHOULD update the SELECT, but nothing happens
//$('#' + r.id).trigger("liszt:updated");
}
}
$('#' + r.id).trigger("liszt:updated");
$('#' + r.id).val(CurrentValue).trigger("liszt:updated");
}
.regionilavori {
width: 350px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/0.9.10/chosen.min.css">
<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/0.9.10/chosen.jquery.min.js"></script>
<select id="RegioniEsiti" multiple="multiple" name="RegioniEsiti" class="regionilavori chzn-select">
<option value="1">Campania</option>
<option value="2">Lombardia</option>
<option value="3">Toscana</option>
<option value="4">Lazio</option>
</select>
You have select multiple so each time you select option you got array of values as result.
you can check this test for your case.
$("#RegioniEsiti").chosen();
$('body').on('click', '.search-choice-close', function(event) {
var close = $(event.currentTarget)
var option = $("#RegioniEsiti option")
$(option[close.attr('rel')]).removeAttr('selected');
});
$("#RegioniEsiti").on('change',function() {
var $this = $(this);
$($this.val()).each(function(v,val) {
$this.find("option[value="+val+"]").attr("selected","selected");
});
});