We Keep Coding

JS line break inside select option

i have to create an input with line break inside.
Attempted to do like this, (using Choices.js library for multiple autocomplete tag) :
<select id="choices1" class="form-control" name="choices-multiple-remove-button" placeholder="Compétences" multiple>
js:
arrayOfObjects.forEach(function(obj){
var options = '<option value="' + obj.id + '">' + obj.name + '\n' + obj.description +'</option>';
choices1.insertAdjacentHTML('beforeend',options);
});
As you can see, i want to have the description under the name line.
Is it impossible to create a hack in order to have '\n' or something else works ?

how to keep last time selected value in dropdownlist even after re-open app

dropdown = '';
dropdown += '<option value="' + CONFIGURATOR.ChineseLanguage + '">Series 1520</option>\n';
dropdown += '<option value="' + CONFIGURATOR.EnglishLanguage + '">Series 1580</option>\n';
$('.tab-setup select[name=languageSelect]').html(dropdown);
html
<select class="dropdown" name="languageSelect" id="selectlanguage"></select>
datavariable.js
var CONFIGURATOR = {
'ChineseLanguage': 'zh',
'EnglishLanguage': 'en'
};
how to keep last time selected option in dropdownlist still appear even after re-open app

You can use localStorage api to store the value, and it will be persisted even when the application is closed.
var dropdown = '',
$select = $('.tab-setup select[name=languageSelect]'),
storedValue = localStorage.getItem('languageSelectValue');
dropdown += '<option value="' + CONFIGURATOR.ChineseLanguage + '">Series 1520</option>\n';
dropdown += '<option value="' + CONFIGURATOR.EnglishLanguage + '">Series 1580</option>\n';
$select.html(dropdown);
//Set the initial value if any
if (storedValue) {
$select.val(storedValue);
}
//Bind a listener to store the selected value in localStorage
$select.on('change', function () {
localStorage.setItem('languageSelectValue', $(this).val());
});

How to use multiple [attribute=value] Selector for same element?

I am creating a bilingual form in which I have a select tag with multiple option tags inside. I wanna get that option with class "blah" and with value "1" and then select it as "selected" option.
I selected it based on class and then select based value but the result is null. Here is my code:
$('select').each(function (e, item) {
var selectedEnglish = $(item).children("option[class='English']")
var englishItem = selectedEnglish.find("option:selected").val();
var farsiList = $(item).children("option[class='Farsi']")
var farsiItem = farsiList.find("[value='" + englishItem + "']");
farsiItem.attr('selected', 'selected');
});
Whats more how can I get with one chain of statements?
this selected is populated in jquery:
$("#TitleId").html("");
$("#TitleId")
.html("<option value='' class='Farsi'>عنوان</option><option value='' class='English'>Title</option>");
$.each(titles,
function (key, value) {
$("#TitleId")
.html($("#TitleId").html() +
"<option class='Farsi' value='" +
value.Id +
"'>" +
value.Name +
"</option>"+
"<option class='English' value='" +
value.Id +
"'>" +
value.EnName +
"</option>");
});

If you want to get the option with class "blah" and value "1", this is your query:
$('select option[class=blah][value="1"]')
If you want to select that option you can simply do:
$('select option[class=blah][value="1"]').attr('selected', 'selected');

Listbox doesn't always show items based on other listbox

Based on a value of one listbox (selecttreatment), another listbox (indicators) options are being populated. The javascript code i use:
function sendData() { // onchange
$("#indicators").empty();
console.log($("#selecttreatment").val());
$.getJSON("functions/getcharts.php", {funcid:"giveme_chosen_treatment", chosen_treatment: $("#selecttreatment").val()}, updateData);
}
function updateData(data) {
console.log(data);
var option = '';
for (var i=0;i<data.length;i++){
//option += '<option value="'+ data[i].zi_indicator_name_id + '">' + data[i].zi_indicator_name_label + '</option>';
option += '<option value="'+ data[i].indicator_name + '">' + data[i].indicator_name + '</option>';
}
$('#indicators').append(option);
}
At first I believed it only went wrong when mysql gives back one row, but that isn't the problem. I can't fugure out whats going wrong.
So my problem is that sometimes the 2nd listbox is being populated with values, but most of the times it isn't.

Dynamically populate select options with nested JSON

What i want to achieve
I have got one static select html options, these options do not change but will determine what the other select boxes output.
<select id="firstselectbox">
<option value="first">This is the first</option>
<option value="second">This is the second</option>
<option value="third">This is the third</option>
<option value="fourth">This is the fourth</option>
<option value="fifth">This is the fifth</option>
</select>
Currently, the code i have written doesnt want to output the following:
Select 1: option selected first
Select 2: checks jSon file, finds first and all of the nodes (second layer) and list them. When a user selects that.
Select 3: displays the third layer
Please note the * is the option selected below - select 1 is static and select 2 and 3 are dynamic.
Select 1 Select 2 Select 3
first* London Famous Famous
second Jersey London Famous
third North*
fourth South East
fifth South West
sixth
What have i done so far
var datajson = {"first":[{"jesery":[{"id":"jesery","name":"Jesery","jesery":[{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}],"dontknow":[{"id":"dontknow","name":"Dont Know"}]}],"second":[{"london":[{"id":"london","name":"London","london":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}]}],"third":[{"london":[{"id":"london","name":"London","london":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}],"north":[{"id":"north","name":"North","north":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}]}],"forth":[{"north":[{"id":"north","name":"North","north":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}],"dontknow":[{"id":"dontknow","name":"Dont Know"}]}],"fifth":[{"london":[{"id":"london","name":"London","london":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}],"southeast":[{"id":"southeast","name":"South East","southeast":[{"id":"distance","name":"Distance"}]}]}]}
$("#firstselectbox").on('change', function() {
$("select#firstselectbox").html('');
var locations = datajson[$(this).val()];
var locationString = '';
$.each(locations, function(i, item) {
console.log(locations[i]);
locationString += '<option id="'+ locations[i].id + '" value="' + locations[i].id + '">' + locations[i].name + '</option>';
});
$('#secondselectbox').html(locationString);
});
Issue?
The following code is locationString += '<option id="'+ locations[i].id + '" value="' + locations[i].id + '">' + locations[i].name + '</option>'; is outputting unidentified.
However console.log(locations[i]); is outputting the array that that is selected from the static select box (first, second etc..). However, trying to separate that out seems to fail.
The current code is outputting unidentified.

Use unobtrusive JavaScript so you won't have to hunt bugs like this one:
$('#secondselectbox').empty()
$.each(locations, function(i, item) {
$("<option/>",{id:locations[i].id, value:locations[i].id, text:locations[i].name})
.appendTo('#secondselectbox')
})
Edit: Also there is a problem with your JSON structure. You basically have an array which contains a single object, so when you foreach the array you are at one level lower than where you need to be.