Develop Reference

Save new click change with jQuery on RELOAD (new page)

I made a dropdown with a html value change result, so after every click i get the new html value:
$("#list li a").on('click',function(){
var val=$(this).html();
$("#selector").html(val);
});
Simple enough to understand. What I'm trying to do is in the new reload, the html (val) stays on the new load. How can one do this?
I was thinking of HTML5: localStorage but really not sure if this is right?
localStorage.setItem(currentlist, $('#selector').val());
window.onload = function() {
var name = localStorage.getItem(currentlist);
}
Not sure if Im doing this right or missing something. But this is where I'm at. Is this the right way to go...or do some cookie state?

JSFIDDLE DEMO
$("#list li a").on('click',function(){
var val = $(this).html();
$("#selector").html(val);
localStorage.setItem("currentlist", val); //add to localStorage
});
and in your onload
var name = localStorage.getItem("currentlist"); //get from localStorage
$("#selector").html(name); //assign here

Adding items to an array using jQuery

I'm using jQuery to add elements to a specified element. So a user selects options from a drop down menu and it's appended to a div. My jQuery is:
$('#datacombo').on('change', function () {
var selecteddata = $("#datacombo").val().toString();
$('#datadisplay').append("<p>"+ selecteddata + "</p>"); });
my HTML is simple a div:
<div id="datadisplay"></div>
I'm wanting to use ALL the 'selected data' at a later point so i want to add the selected items to a variable array.
I've searched on here and tried these:
How do I gather dropdown values into array with jQuery?
But couldnt get it to work, any suggestions?

Just declare array as global variable. And then push elements to it.
var selectedDatas = new Array();
$('#datacombo').on('change', function () {
var selecteddata = $("#datacombo").val().toString();
selectedDatas.push(selecteddata);
$('#datadisplay').append("<p>"+ selecteddata + "</p>");
});

Append additional key values to a different <div>

I've got radios attached to divs, and when the div is clicked the info on the widget updates to display the data associated to the div. I'm getting the data from the Yahoo API with JSON script. The appropriate data is appearing on my div called "Current", but when I click on "24-Hour" I get nothing.
Check out my script on this fiddle: http://jsfiddle.net/thetuneupguy/r2Bca/11/
$.each(data.query.results.quote, function (key, obj) {
var $lc = $('<tr/', {
'class': 'my-new-list'
}).appendTo('#blk-2 table');
$lc.append($('<td/>').text(obj.Name || "--"));
$lc.append($('<td/>').text(obj.PreviousClose || "--"));
});

It appears that I forgot to close out a tag, which I have caught and fixed...
var $lc = $('<tr/', {
should be...
var $lc = $('<tr/>', {

How can I create a combobox with saving value in javascript (similar to google CategoryFilter Control)

I want to have on my html-site an combobox like on the following img. I want to get the selected values and print in out. How can I create this comboBox?? I have tried the Google API Visualization CategoryFilter Control. But you can not customize the google control.
Thank you

I just mocked up a combo-box like you described: http://jsfiddle.net/twwGM/
Basically, you need to use JS to capture the onchange event of the select box, and then append its value to some target area with specific styling by generating an HTML string from your function. Keep styles out of the JS and instead style it through the use of a CSS class.
HTML Markup:
<form>
<select id="selector">
<option>Magic</option>
<option>Canaries</option>
<option>Unicorns</option>
</select>
</form>
<div id="target-area"></div>
JS Code
(function () {
document.getElementById("selector").addEventListener("change", function () {
var val = this.options[this.selectedIndex].value;
var genId = val + "-close";
if (!document.getElementById(genId)) {
var htmlstr = "<div class='pasted-option'>" + val + "<span id='" + genId + "'>x</span></div>";
var targetArea = document.getElementById("target-area");
targetArea.innerHTML += htmlstr;
var closeButton = document.getElementById(genId);
closeButton.addEventListener("click", function () {
var parent = this.parentNode;
parent.parentNode.removeChild(parent);
});
}
});
}(window));
As you can see within the code, we also generate an id for the span based on the item's name so that we can make a call to it later for removal from the list. It also gives us the ability to check and make certain the value doesn't already exist within the list.

Java Script : get the string equivalent of a elements ID

my naming convention
id=xxxxx //actual field shown in the screen
id=xxxxxHDN // hidden field containing the enable/disabled status of the component from the set from the controller.
Now what I am trying to do is get the satus of xxxxxHDN to be true/false ,
and accordingly set the components status to disabled /enabled .with java script..
var div = document.getElementById("hiddenFields"); // i hava some 30 hidden fields containing the
var j;
for (j=0;j<div.childNodes.length;j++)
if(div.childNodes[j].value){
alert("inside the loop");
var someElementHDN = div.childNodes[j].id; // my aim is to get the ID=xxxxxHDN
var someElementHDNToString = someElementHDN .toString(); // my aim is to get the string value "xxxxxHDN"
var toRemove = 'HDN'; // the part i wanna remove from 'someElementHDNToString' to make it an id for 'xxxxx'
var equivalantComponentIDAsString = someElementToString.replace(toRemove,'');
$('#' + equivalantComponentIDAsString ).attr('disabled', true);
}
}
Invested a lot of time manupulatiing things above , doesent seems to work . I am new to java scrcript , Where am I missing it?

If you have an element with id like 'fooHDN' and want to find another element with id 'foo', then you can do something like:
var otherElement = document.getElementById(someElement.id.replace(/HDN$/,''));
Assuming that you already have someElement and it's a DOM element.

Your posted js code has error: div does not have a "length", do you mean "div.childNodes.length"?
Anyway, since you're using jQuery already, I think it can become easier as below:
Already tested and it works fine.
$("#hiddenFields input[type='hidden'][id$='HDN']").each(
function () {
var elemId = this.id.replace(/HDN$/, '');
$('#' + elemId).attr('disabled', this.value.toLowerCase() == 'false' ? false : true);
}
);