Develop Reference

Sorting an HTML select with Javascript. Parameter not working

I have 2 select's. I want to move items between them. They should be sorted. I grabbed some code from SO, and am experiencing something weird. When I pass the element as a parameter to the sort function, it doesn't work. When I explicitly get the element in the sort function it works perfectly. Look at the first line in the sort function and you'll see what I'm talking about.
Here's my PHP part.
echo "
<div><select id='listBox1' class='form-control select-manage-category' size='5'>
<option value=1>1-text</option>
<option value=2>2-text</option>
<option value=3>3-text</option>
<option value=4>4-text</option>
</select></div>
<input id='add-category' onclick='ClickAdd()' name='add' type='button' value='Add Item'>
<input id='remove-category' onclick='ClickRemove()' name='add' type='button' value='Remove Item'>
<div>
<select id='listBox2' class='form-group percent-100' size='5'></select>
</div>
";
echo "<script>";
include 'bstest.js';
echo "</script>";
And, this is my JS (bstest.js).
function ClickAdd()
{
// get the 'left' listbox.
var e = document.getElementById('listBox1');
// get the text and value of selected item.
var eText = e.options[e.selectedIndex].text;
var eVal = e.value;
// create the new element
var opt = document.createElement('option');
opt.text = eText;
opt.value = eVal;
// add it to the 'right' listbox.
document.getElementById('listBox2').options.add(opt);
// now remove it from the 'left' list.
value = e.selectedIndex;
e.removeChild(e[value]);
sortSelect(e);
}
function ClickRemove()
{
// get the 'right' listbox.
var e = document.getElementById('listBox2');
// get the text and value of selected item.
var eText = e.options[e.selectedIndex].text;
var eVal = e.value;
// create the new element
var opt = document.createElement('option');
opt.text = eText;
opt.value = eVal;
// add it to the 'left' listbox.
document.getElementById('listBox1').options.add(opt);
// now remove it from the 'right' list.
value = e.selectedIndex;
e.removeChild(e[value]);
sortSelect(e);
}
function sortSelect(selectToSort)
{
//selectToSort = document.getElementById('listBox1'); // works. If I comment it, it doesn't work.
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];
}
return;
}

Alerting JS Array Selection

I have a select with options that I am putting into an array, and I am attempting to alert a specific message when you click a button, but only if the proper array[x] has been selected. However, when I click the button, regardless of the option I get the message. What am I doing wrong?
Code:
HTML:
<button id="button">Click Me</button>
<br />
<br />
<select id = "list" value = "list">
<option id="one" value="one">
one
</option>
<option id="two" value="two">
two
</option>
<option id="three" value="three">
three
</option>
</select>
JS:
var listArr = [];
var button = document.getElementById("button");
var list = document.getElementById("list");
var selected = document.getElementById("list").selectedIndex;
for (var i = 0; i < list.options.length; i++) {
listArr[i] = list.options[i].value;
}
button.onclick = function() {
if (selected = [1]) {
alert("hello");
}
};

You cannot compare arrays like this. You need to use literal number instead. JSFiddle
var listArr = [];
var button = document.getElementById("button");
var list = document.getElementById("list");
var selected = document.getElementById("list");
for(var i = 0; i < list.options.length; i++) {
listArr[i] = list.options[i].value;
}
button.onclick = function() {
if(selected.selectedIndex == 1) {
alert('hello');
}
};

If I have understood your question correctly, you need the updated value of the select:
button.onclick = function()
{
if(document.getElementById("list").selectedIndex==1) // Also change = to ==
{
alert("hello");
}
};
https://jsfiddle.net/6bs1vjva/1/

get the multiple selection as comma separated from select box into a text input

I don't know js. I need to get the multiple selection as comma separated from select box into a text input.
with pure js, I found only this question related on SO. Multiple selections into input box
And I tried the js code in that question. (question js combination with accepted answer)
However I couldn't achieve.
what I need is for example printing Australia,England into text input after selecting those 2 and submitting.
Fiddle link is:
http://jsfiddle.net/0k2m7gLo/
CODE IN FIDDLE
HTML
<form>
<select id="countries" multiple>
<option value="val0">Australia</option>
<option value="val1">England</option>
<option value="val2">France</option>
</select>
<input type="button" value="Show Index" onclick="showSelected();" />
</form>
<p>selected countries by comma seperated</p>
<form><input type="text" id="txtText" /></form>
UNSUCCESSFUL JS
function showSelected()
{
var selObj = document.getElementById('countries');
var txtTextObj = document.getElementById('txtText');
var selIndex = selObj.selectedIndex;
txtTextObj.value += selObj.options[selIndex].text +', ';
}

You can do something like this:
var selObj = document.getElementById('countries'),
txtTextObj = document.getElementById('txtText'),
selected = [];
for(var i = 0, l = selObj.options.length; i < l; i++){
//Check if the option is selected
if(selObj.options[i].selected){
selected.push(selObj.options[i].textContent);
}
}
txtTextObj.value = selected.join(', ');
jsFiddle

function updateSelected() {
var select = document.getElementById('countries'),
options = select.options,
input = document.getElementById('selected');
var selected = [];
for (var i = 0, ii = options.length; i < ii; ++i) {
var opt = options[i];
if (opt.selected) {
selected.push(opt.innerHTML);
}
}
input.value = selected.join(', ');
}

disable checkbox when i select

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>

selected value not appear in select option in html

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>