We Keep Coding

How to refresh a value based on a drop down selection code igniter

I'm making a chart based on a drop down selection in code igniter, but I'm getting problems with refreshing the value after I select a drop down list.
I'm using onchange but it seems not to be working.
<form>
<select class="form-control btn-primary" id="sel1" onchange="window.setTimeout(function(){ document.location.reload(true); }, this.options[this.selectedIndex].value);">
<option value = "1">Layanan</option>
<option value = "2">Hasil</option>
<option value = "3">Waktu</option>
<option value = "4">Biaya</option>
</select>
</form>
var temp = document.getElementById("sel1").value;
The refresh page is working, but the value is not changing. It keeps getting back to the first selection. Any ideas?

As a solution (may not suit for your case): You need to pass parameter query along with window location string, but you should set an event listener for window load event:
HTML:
<select class="form-control btn-primary" id="sel1" onchange="reloader();">
<option value = "1">Layanan</option>
<option value = "2">Hasil</option>
<option value = "3">Waktu</option>
<option value = "4">Biaya</option>
</select>
Javascript:
function reloader(){
var param = document.getElementById('sel1').value;
var ref = window.location.href.split('?')[0];
if (param)
window.location.href = ref + "?sel1="+param;
}
window.addEventListener('load', function() {
var query = window.location.href.split('?')[1];
if (query) {
var qval = query.split('=')[1];
document.getElementById('sel1').value = qval;
} else {
document.getElementById('sel1').value = 1;
}
});

Try to use the https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Property/selectedIndex
It will help you select the desired option.
Something like this
document.getElementById("sel1").selectedIndex = 2;

Manipulate Json array on select change

I am new to JQuery and I am wondering if his is possible.
I have a PHP controller that sends a json encoded array to a view,
this is the json array:
{"id":"1","color":"blue","description":"This is the color blue"},
{"id":"8","color":"green","description":"This is the color green"},
{"id":"14","color":"red","description":"This is the color red"}
Now on the view I have a the following:
<select id="selector">
<option value="">Select one</option>
<option value="1">blue</option>
<option value="8">green</option>
<option value="14">red</option>
</select>
<div id="description">
</div>
What I want to do is first populate the select list from the json array, then if I select green from the dropdown list the description for green should appear on the div, if I change my selection the appropriate description should appear on the div.
And the option I select should no longer appear on the select list like if I choose green, only red and blue should appear on the available option, if the I select another color let say blue then red and green should be available for another select.
I am currently doing it running a new query onchange of the select but I want to do it without another query and page refresh, I imagine it is possible since I already send the JSON array to the browser.
Hope I am clear on my problem and thank you for your help!

var data = [{"id":"1","color":"blue","description":"This is the color blue"},
{"id":"8","color":"green","description":"This is the color green"},
{"id":"14","color":"red","description":"This is the color red"}];
var selector = $('#selector');
data.forEach(function(obj){
// create option
var option = $('<option>');
// set its value
option.val(obj.id);
// set its text
option.text(obj.text);
// append it to select element
selector.append(option);
}
selector.change(function(){
var value = this.value;
// show all options
selector.find('option').show();
// hide the selected
$(value).hide();
// find the selected object
var selected = data.filter(function(obj){
return obj.id == value;
});
// if returns exactly one show its description
if (selected.length == 1)
$('#description').text(selected[0].description);
});

Firstly you Jsonmust be like this :
[{"id":"1","color":"blue","description":"This is the color blue"},
{"id":"8","color":"green","description":"This is the color green"},
{"id":"14","color":"red","description":"This is the color red"}]
this is some code i have tried i think it will be help you :
$(document).ready(function(e){
$("#selector").on('change',function(){
var dataL= $("#selector option:selected").val();
$.post("Page_json.php",{myVal:dataL},function(data,message,xhr){
if(message==='success'){
$.each(data, function(k,v){
if(v.id == dataL){
$("#description").text(v.description);
return false;
}
});
}
},'json');
});
});

Javascript dropdownlist on button/click event

I'm trying to display an image when the user selects an option in the dropdown list, the image will then be displayed after button click. This is my idea on how to do this but I'm not quite sure if its correct so I'm asking others for opinion's.
Here's my code and a fiddle: http://jsfiddle.net/Bc6Et/1546/
html
<select name="" id="dropdownlist" size="">
<option value="img1">Image</option>
<option value="img2">Image</option>
<option value="img3">Image</option>
<option value="">so on and so forth</option>
</select>
<input type="button" value="Show Image" onclick="showimg()" class="button">
javascript/jquery
function showimg() {
var q = document.getElementById("dropdownlist");
var selected = q.options[q.selectedIndex].value;
var src = "/var/www/VAA/img";
if (selected === img1) {
show_image("/var/www/VAA/img/img1.png");
}
elseif(selected === img2) {
show_image("/var/www/VAA/img2.png");
}
}
function show_image(src, width, height, alt) {
var img = document.createElement("img");
img.src = src;
document.body.appendChild(img);
}
Or I could use case/break switch statements instead of if/else. Appreciate all the help tnx oh and 1 more thing the images are on my desktop thought you might need that info

Instead of having a if statement for each images maybe you can try something like this?
<option value="name_of_your_image">Image</option>
And then call your function:
var src = "/var/www/VAA/"+selected+".png";
show_image(src);
http://jsfiddle.net/Bc6Et/1558/
I think this is a better option if you have a lot of images.

You were looking into the wrong variable. q is always the dropdown element and has nothing to do directly with which option is selected and/or their respective value.
img1 and img2 must be declared as a string since they are no variables.
function showimg() {
var q = document.getElementById("dropdownlist");
var selected = q.options[q.selectedIndex].value;
console.log(selected);
var src = "/var/www/VAA/img";
if (selected === "img1") {
show_image("/var/www/VAA/img");
}
else if (selected === "img2") {
show_image("/var/www/VAA/img");
}
}
function show_image(src, width, height, alt) {
var img = document.createElement("img");
img.src = src;
console.log(src);
document.body.appendChild(img);
}
working fiddle

It would work but you will need one if condition for every image you have.
Why don't you put all images on the same folder, and build the imagepath concatenating strings?
src = "/var/www/VAA/";
var selected = q.options[q.selectedIndex].value;
show_image(src+selected);

There are several errors
function showimg() {
var q = document.getElementById("dropdownlist");
var selected = q.options[q.selectedIndex].value;
var src = "/var/www/VAA/img";
if (selected === "img1") {
//_____^__________
show_image("/var/www/VAA/img");
}
else if(selected === "img2") {
//__^__________^______
show_image("/var/www/VAA/img");
}
}
function show_image(src, width, height, alt) {
var img = document.createElement("img");
img.src = src;
document.body.appendChild(img);
}
FIDDLE

I have a suggestion so that you don't have to have a lot of conditional statements for identifying which image to show: what if you place the image src (or maybe just the filename if you want) as the value of the select box's options, like so:
<select name="image" id="dropdownlist">
<option value="/source/for/image1.png">Image 1</option>
<option value="/source/for/image2.png">Image 2</option>
<option value="/source/for/image3.png">Image 3</option>
</select>
<input type="button" value="Show Image" class="button" />
And then you can modify your jQuery code like so:
$('.button').on('click', function() {
var image = $('<img src="' + $('#dropdownlist').val() + '" />');
$('body').append(image);
});

Change images from a select field using Javascript

So I'm trying to change an image based on which option the user selects from a dropdown menu. My images for now are "cyan.png", "magenta.png", "yellow.png", "black.png", and "fuschia.png".
My HTML
<select name="color" multiple>
<option>Cyan</option>
<option>Magenta</option>
<option>Yellow</option>
<option>Black</option>
<option>Fuschia</option>
</select>
My JavaScript
// This part tries to load all images onto the carArray variable
var nameArray = new Array("cyan.png", "magenta.png", "yellow.png", "black.png", "fuschia.png");
var carArray = new Array;
for(var i = 0; i < carArray.length; i++) {
carArray[i] = new Image;
carArray[i].src = nameArray[i];
}
// This part tries (and fails) to change the image when the user selects a color from a dropdown menu
window.onload = function() {
var colorPicker = document.getElementsByName("color").selectedIndex;
var options = document.getElementsByName("color").options;
document.getElementById("photo").src = carArray[options[colorPicker];
}
Could you please help me understand what the problem is, and how to fix it.

If you bind your function on window.onload, it will only fire once at windows loading. You probably want to bind it on the select onchange event.
E.g.:
function pickColor() {
var colorPicker = document.getElementsByName("color").selectedIndex;
var options = document.getElementsByName("color").options;
document.getElementById("photo").src = carArray[options[colorPicker]];
}
<select name="color" onchange="pickColor()" multiple>
...
As #LightStyle suggests, you should avoid inline event assignments. I don't know your DOM, so for simplicity I'll add an id (it must be unique in the page) to your select. You can then do the following:
document.getElementById('color').onchange = function() {
var colorPicker = document.getElementsByName("color").selectedIndex;
var options = document.getElementsByName("color").options;
document.getElementById("photo").src = carArray[options[colorPicker]];
}
<select name="color" id="color" multiple>

update existing option in select list

Let's say that I have select list with 3 options inside:
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
Now, I want to update one of these options, so i create textfield & button.
The option appear inside the textfield everytime i press on one of the options at the select list.
Can someone direct me what do i need to do?
thanks

Adding up to the first example that we had this morning jsfiddle
HTML:
<select id='myselect'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
<input type='text' value='1' name='mytext' id='mytext' />
<button value='add' id='addbtn' name='addbtn'>add</button>
<button value='edit' id='editbtn' name='editbtn'>edit</button>
<button value='delete' id='deletebtn' name='deletebtn'>delete</button>
JavaScript:
var myselect = document.getElementById('myselect');
function createOption() {
var currentText = document.getElementById('mytext').value;
var objOption = document.createElement("option");
objOption.text = currentText;
objOption.value = currentText;
//myselect.add(objOption);
myselect.options.add(objOption);
}
function editOption() {
myselect.options[myselect.selectedIndex].text = document.getElementById('mytext').value;
myselect.options[myselect.selectedIndex].value = document.getElementById('mytext').value;
}
function deleteOption() {
myselect.options[myselect.selectedIndex] = null;
if (myselect.options.length == 0) document.getElementById('mytext').value = '';
else document.getElementById('mytext').value = myselect.options[myselect.selectedIndex].text;
}
document.getElementById('addbtn').onclick = createOption;
document.getElementById('editbtn').onclick = editOption;
document.getElementById('deletebtn').onclick = deleteOption;
myselect.onchange = function() {
document.getElementById('mytext').value = myselect.value;
}
Basically i added an edit field that when clicked it'll edit the value and text of the currently selected option, and when you select a new option it'll propogate the textfield with the currently selected option so you can edit it. Additionally, i also added a delete function since i figure you might need it in the future.

Use jquery :selected selector and val() method.
$('select:selected').val($('input_textbox').val());

First of all always give an ID to your input tags. For eg in this case you can do something like: <select id='myDropDown'>
Once you have the ID's in place its simple matter of picking up the new value from textbox and inserting it into the dropdown:
Eg:
// Lets assume the textbox is called 'myTextBox'
// grab the value in the textbox
var textboxValue = document.getElementById('myTextBox').value;
// Create a new DOM element to be inserted into Select tag
var newOption = document.createElement('option');
newOption.text = textboxValue;
newOption.value = textboxValue;
// get handle to the dropdown
var dropDown = document.getElementById('myDropDown');
// insert the new option tag into the dropdown.
try {
dropDown.add(newOption, null); // standards compliant; doesn't work in some versions of IE
}
catch(ex) {
dropDown.add(newOption); // IE only
}

Below is a pure js example using your markup.
EDIT
After rereading your question Im not sure if you wanted the option to update when a user clicked the button or not.. To just put the option into an input you can do this.
var select = document.getElementsByTagName("select")[0],
input = document.getElementById("inputEl");
select.onchange = function(){
input.value = this[this.selectedIndex].text;
}
To update the option to what the user typed in is below.
http://jsfiddle.net/loktar/24cHN/6/
Markup
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<input type="text" id="inputEl"/>
<button id="button">Update</button>
Javascript
var select = document.getElementsByTagName("select")[0],
input = document.getElementById("inputEl"),
button = document.getElementById("button");
select.onchange = function(){
input.value = this[this.selectedIndex].text;
var selected = this,
selectedIndex = this.selectedIndex;
button.onclick = function(){
selected[selectedIndex].text = input.value;
}
}