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();
Related
I have this code:
<script>
onKeyUp = function (src) {
if (this.event.keyCode !== 13) {
return;
}
var queryStringArray = [], queryString;
var selectedElements = src.selectedOptions;
for(var i = 0 ; i < selectedElements.length ; i++) {
queryStringArray.push(selectedElements[i].getAttribute('value'));
}
queryString = queryStringArray.join('+');
window.location.assign('http://example.co.il/tag/' + queryString);
}
</script>
And works well with this:
<select data-placeholder="???" class="chosen-select" multiple style="width:350px;" tabindex="4" onkeyup="onKeyUp(this)">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
I try to put him in my original file and then it does not work ..
In my original file has jquery
The function did not run
What to do?
Full Code: http://pastebin.com/PLHniVpr
If your original file has JQuery, why do you use onkeyup instead of adding a keyup listener for the select element to your Jquery code:
//assuming your select element has id="mySelect"
$('#mySelect').keyup(function(event){
var key = event.keyCode;
if(key == 13) {
var queryStringArray = [], queryString;
var selectedElements = event.target.selectedOptions;
for(var i = 0 ; i < selectedElements.length ; i++) {
queryStringArray.push(selectedElements[i].getAttribute('value'));
}
queryString = queryStringArray.join('+');
window.location.assign('http://example.co.il/tag/' + queryString);
}
});
Plunker Example
put in windows load function it will work
<script>
winodow.onload =function(){
onKeyUp = function (src) {
if (this.event.keyCode !== 13) {
return;
}
var queryStringArray = [], queryString;
var selectedElements = src.selectedOptions;
for(var i = 0 ; i < selectedElements.length ; i++) {
queryStringArray.push(selectedElements[i].getAttribute('value'));
}
queryString = queryStringArray.join('+');
window.location.assign('http://example.co.il/tag/' + queryString);
}
}
////////or
$(document).ready(function(
onKeyUp = function (src) {
if (this.event.keyCode !== 13) {
return;
}
var queryStringArray = [], queryString;
var selectedElements = src.selectedOptions;
for(var i = 0 ; i < selectedElements.length ; i++) {
queryStringArray.push(selectedElements[i].getAttribute('value'));
}
queryString = queryStringArray.join('+');
window.location.assign('http://example.co.il/tag/' + queryString);
}
));
<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.
I have a multi select option filed like the follows;
<select name="cars" id="carsId" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit" onclick="readValues()">
I need to read all the values into an array on readValues function. The array shopuld be like
A = [Volvo,Saab,opel,audi]
Please help me guys!!
You may try this also:
var readValues = function () {
var options = document.getElementById('carsId').options;
var list = [],
i = options.length;
while (i--) {
list.push(options[i].value);
}
console.log(list);//<-- ["audi", "opel", "saab", "volvo"]
};
In-case you need the text shown to user, use list.push(options[i].innerHTML);
http://www.w3schools.com/jsref/coll_select_options.asp
var x = document.getElementById("mySelect");
var options = [];
for (var i = 0; i < x.length; i++)
{
options.push(x.options[i].value);// or .text for the text
}
with jquery :
How to get all options of a select using jQuery?
var options = [];
$("#id option").each(function()
{
options.push($(this).val());
});
You can try this:
If you're using jQuery you can try following
jQuery solution
function readValuesJQuery(){
var A = $("select option").map(function(){
return this.value;
}).get();
console.log(A);
}
OR
javascript solution
function readValuesJavascript(){
var ddlArray= new Array();
var ddl = document.getElementsByTagName('select')[0];
for (i = 0; i < ddl.options.length; i++) {
ddlArray[i] = ddl .options[i].value;
}
console.log(ddlArray);
}
Demo
using jQuery:
function readValues() {
var values = [];
$('[name="cars"] option').each(function() {
values.push($(this).val());
});
return values;
}
using pure javascript:
var readValues = function () {
var options = document.getElementById('carsId').children;
var values = [];
for(i = 0; i < options.length; ++i) {
values.push(options[i].value);
}
console.log(values);
return values;
}
Demo: http://jsfiddle.net/q94ndrcc/
click here
$("#sel").click(function(e) { // when link clicked
e.preventDefault();
$("#foo option:selected ").each(function() {
var v = $(this).attr("value"); // first select's value
$('#bar option').each(function() {
if ($(this).attr("value") == v) {
$(this).attr("selected",true); // select if same value
}
});
});
})
Try following its working.
HTML
<select name="cars" id="carsId" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="button" id="btnClick" value="getValue">
Script: jQuery 1.9.1
//1. for selected value:
$(document).ready(function(){
$('#btnClick').click(function(){
var selText = [];
$("#carsId option:selected").each(function () {
var $this = $(this);
if ($this.length) {
selText.push($this.text());
}
});
alert(selText);
});
});
//2. get all value without any selection:
$(document).ready(function(){
$('#btnClick').click(function(){
var selText = [];
$("#carsId option").each(function () {
var $this = $(this);
if ($this.length) {
selText.push($this.text());
}
});
alert(selText);
});
});
Running Demo
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");
});
});
I have multiple selects:
<select id="one">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<select id="two">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
What I want is to select "one" from the first select, then have that option be removed from the second one.
Then if you select "two" from the second one, I want that one removed from the first one.
Here's the JS I have currently:
$(function () {
var $one = $("#one");
var $two = $("#two");
var selectOptions = [];
$("select").each(function (index) {
selectOptions[index] = [];
for (var i = 0; i < this.options.length; i++) {
selectOptions[index][i] = this.options[i];
}
});
$one.change(function () {
var selectedValue = $("option:selected", this).val();
for (var i = 0; i < selectOptions[1].length; i++) {
var exists = false;
for (var x = 0; x < $two[0].options.length; x++) {
if ($two[0].options[x].value == selectOptions[1][i].value)
exists = true;
}
if (!exists)
$two.append(selectOptions[1][i]);
}
$("option[value='" + selectedValue + "']", $two).remove();
});
$two.change(function () {
var selectedValue = $("option:selected", this).val();
for (var i = 0; i < selectOptions[0].length; i++) {
var exists = false;
for (var x = 0; x < $one[0].options.length; x++) {
if ($one[0].options[x].value == selectOptions[0][i].value)
exists = true;
}
if (!exists)
$one.append(selectOptions[0][i]);
}
$("option[value='" + selectedValue + "']", $one).remove();
});
});
But when the elements get repopulated, it fires the change event in the select whose options are changing. I tried just setting the disabled attribute on the option I want to remove, but that doesn't work with IE6.
I am not (currently) a user of jQuery, but I can tell you that you need to temporarily disconnect your event handler while you repopulate the items or, at the least, set a flag that you then test for and based on its value, handle the change.
Here's the final code that I ended up using, the flag (changeOnce) worked great, thanks #Jason.
$(function () {
var $one = $("#one");
var $two = $("#two");
var selectOptions = [];
$("select").each(function (index) {
selectOptions[index] = [];
for (var i = 0; i < this.options.length; i++) {
selectOptions[index][i] = this.options[i];
}
});
var changeOnce = false;
$one.change(function () {
if (changeOnce) return;
changeOnce = true;
var selectedValue = $("option:selected", this).val();
filterSelect(selectedValue, $two, 1);
changeOnce = false;
});
$two.change(function () {
if (changeOnce) return;
changeOnce = true;
var selectedValue = $("option:selected", this).val();
filterSelect(selectedValue, $one, 0);
changeOnce = false;
});
function filterSelect(selectedValue, $selectToFilter, selectIndex) {
for (var i = 0; i < selectOptions[selectIndex].length; i++) {
var exists = false;
for (var x = 0; x < $selectToFilter[0].options.length; x++) {
if ($selectToFilter[0].options[x].value == selectOptions[selectIndex][i].value)
exists = true;
}
if (!exists)
$selectToFilter.append(selectOptions[selectIndex][i]);
}
$("option[value='" + selectedValue + "']", $selectToFilter).remove();
sortSelect($selectToFilter[0]);
}
function sortSelect(selectToSort) {
var arrOptions = [];
for (var i = 0; i < selectToSort.options.length; i++) {
arrOptions[i] = [];
arrOptions[i][0] = selectToSort.options[i].value;
arrOptions[i][1] = selectToSort.options[i].text;
arrOptions[i][2] = selectToSort.options[i].selected;
}
arrOptions.sort();
for (var i = 0; i < selectToSort.options.length; i++) {
selectToSort.options[i].value = arrOptions[i][0];
selectToSort.options[i].text = arrOptions[i][1];
selectToSort.options[i].selected = arrOptions[i][2];
}
}
});
Or you can just hide the option you don't want to show...
function hideSelected($one, $two)
{
$one.bind('change', function()
{
var val = $one.val();
$two.find('option:not(:visible)').show().end()
.find('option[value='+val+']').hide().end();
})
}
hideSelected($one, $two);
hideSelected($two, $one);
EDIT: Oh sorry, this code does not work with IE6...