We Keep Coding

Refreshing select2 drop down list

I'm trying to dynamically change the option of a select2 dropdown.
I've searched the forum and have managed to change the selected option, but it is only visible when clicking on the dropdown and seeing the entire list. Apologies in advance for not being the best coder.
function changeSelectOption(designSelVal) //designSelVal = 9
{
var opts = document.getElementById("design").options;
for (var opt, i = 0; opt = opts[i]; i++)
{
if (opt.value == design)
{
document.getElementById("design").selectedIndex = i;
break;
}
}
}
/* this shows as having correctly changed from value 2 to 9 */
<option value="2" >Text Only</option>
<option value="4" >Heart Arrow</option>
<option value="9" selected>Heart</option>
The visible option remains 'Text Only' and not 'Heart', it's as if the select box needs refreshing.

You are missing the if condition :
it should be
if (opt.value == designSelVal)
function changeSelectOption(designSelVal) //designSelVal = 9
{
var opts = document.getElementById("design").options;
for (var opt, i = 0; opt = opts[i]; i++) {
if (opt.value == designSelVal) {
document.getElementById("design").selectedIndex = i;
break;
}
}
}
changeSelectOption(9);
<select id="design">
<option value="2" selected>Text Only</option>
<option value="4">Heart Arrow</option>
<option value="9" >Heart</option>
</select>

Javascript select individual option

I have been trying lately to make a function that on change on the select box it return only the selected option value.
My markup looks like this:
<select id='rangeSelector'>
<option value='custom'>Custom</option>
<option value='7 days'>7 days</option>
<option value='14 days'>14 days</option>
<option value='WTD'>WTD</option>
<option value='MTD'>MTD</option>
<option value='QTD'>QTD</option>
<option value='YTD'>YTD</option>
</select>
and the javascript function:
var rangeSelector = document.getElementById('rangeSelector');
rangeSelector.addEventListener('change', function(e) {
var x = rangeSelector.children;
for (var i = 0; i < x.length; i++) {
var newX = x[i].value;
console.log(newX);
}
}, false);
What I am trying to do is when I click on 7 days to return only 7 days.

Don't read the <option>s. Read the <select>.
document.getElementById('rangeSelector').value
Other interesting bits include .selectedIndex and .selectedOptions.
(Of course, as Abhitalks notes in the comments, in your handler, the element getting will already done for you.)

var rangeSelector = document.getElementById('rangeSelector');
rangeSelector.addEventListener('change', function(e) {
console.log(rangeSelector.value);
}, true);
You do not need for loop for that, after firing event "change" rangeSelector.value already have value of chosen element.
so if you wanna add "active" to selected option you can do same:
var rangeSelector = document.getElementById('rangeSelector');
rangeSelector.addEventListener('change', function(e) {
var x = rangeSelector.children;
var y = rangeSelector.selectedIndex;
x[y].className = x[y].className + " active";
console.log(rangeSelector.value);
}, true);
but you should remove "active" class from all non-active, by looping them:)
var rangeSelector = document.getElementById('rangeSelector');
rangeSelector.addEventListener('change', function(e) {
var x = rangeSelector.children;
var y = rangeSelector.selectedIndex;
for (var i = 0; i < x.length; i++) {
x[i].className = ""; //or x[i].removeAttribute("class");`
}
x[y].className = x[y].className + " active";
console.log(rangeSelector.value);
}, true);

You could use jQuery for this, example:
$("#rangeSelector").on("change", function() {
var rangeSelect = document.getElementById("rangeSelector");
var value = selectJaar.options[rangeSelect.selectedIndex].value;
return value;
});
This first gets the dropdown, then get the selected value, and return it.

Try simply using this.value:
document.getElementById('rangeSelector').addEventListener('change', function(e) {
alert(this.value);
});
<select id='rangeSelector'>
<option value='custom'>Custom</option>
<option value='7 days'>7 days</option>
<option value='14 days'>14 days</option>
<option value='WTD'>WTD</option>
<option value='MTD'>MTD</option>
<option value='QTD'>QTD</option>
<option value='YTD'>YTD</option>
</select>

javascript - drop down display on the second field based on selection in first field

I have two fields customer category and customer type,
when I select one element in customer category , I need to display only a set of elements from customer type in the drop down and rest should not appear.
how do write it in javascript. Here is the one I tried but it doesnot yield proper result.
var custcategory = document.getElementById("custcatid");
var custtypes = document.getElementById('custtypeid').options;
alert('yes');
var n = custtypes.length;
var allowedtype;
if (custcategory.options[custcategory.selectedIndex].value == "ANALOGUE") {
alert('ANALOGUE');
allowedtype = 'CATV,CATV RURAL';
}
else if (custcategory.options[custcategory.selectedIndex].value == "COMMERCIAL") {
alert('COMMERCIAL');
allowedtype = ' ,3ST HOTEL,4ST HOTEL,5ST HOTEL';
}
else if (custcategory.options[custcategory.selectedIndex].value == "DAS") {
alert('DAS');
allowedtype = ' ,DAS PHASE1,DAS PHASE2,DAS PHASE3,DAS PHASE4';
}
else if (custcategory.options[custcategory.selectedIndex].value == "DTH") {
alert('DTH');
allowedtype = ' ,DTH';
}
var idx = 0;
for (var i = 0; i < n; i++) {
var type = custtypes[i].value;
var found = allowedtype.search(type);
if (found <= 0) {
custtypes[i].style.display = 'none';
}
else if (idx == 0) {
idx = 1;
document.getElementById('ctl00_uxPgCPH_custtype').selectedIndex = i;
}
}
alert('Done..!');

If I understand correctly, you are trying to filter a second select element based on what is selected in the first select element?
If so I put together the following snippet which might help you out. It can be probably be optimised further but it should help to get you started I feel.
(function () {
var CLASSES = {
categories: '.select__category',
types : '.select__types'
},
map = {
ANALOGUE: [
'CATV',
'CATV RURAL'
],
COMMERCIAL: [
'3ST HOTEL',
'4ST HOTEL',
'5ST HOTEL'
],
DAS: [
'DAS PHASE 1',
'DAS PHASE 2',
'DAS PHASE 3'
]
},
categorySelect = document.querySelector(CLASSES.categories),
typeSelect = document.querySelector(CLASSES.types),
filterTypes = function(val) {
// Based on a value filter the types select.
var opts = typeSelect.options,
allowedOpts = map[val];
typeSelect.value = allowedOpts[0];
for(var i = 0; i < opts.length; i++) {
if (allowedOpts.indexOf(opts[i].value) === -1) {
opts[i].hidden = true;
} else {
opts[i].hidden = false;
}
}
};
filterTypes(categorySelect.value);
categorySelect.addEventListener('change', function(e) {
filterTypes(this.value);
});
}());
<!DOCTYPE html>
<head></head>
<body>
<select id="categories" class="select__category">
<option value="ANALOGUE">Analogue</option>
<option value="COMMERCIAL">Commercial</option>
<option value="DAS">Das</option>
</select>
<select id="types" class="select__types">
<option value="CATV">Catv</option>
<option value="CATV RURAL">Catv Rural</option>
<option value="3ST HOTEL">3st Hotel</option>
<option value="4ST HOTEL">4st Hotel</option>
<option value="5ST HOTEL">5st Hotel</option>
<option value="DAS PHASE 1">Das Phase 1</option>
<option value="DAS PHASE 2">Das Phase 2</option>
<option value="DAS PHASE 3">Das Phase 3</option>
</select>
</body>
If you run the snippet, you'll see that making changes to the first will update the second select accordingly based on the defined map.
Hope this can help you out!

Javascript select option keeps showing a '0' before value

I'm having an issue with getting the value of a select option and calculating it, the issue is that everytime i select an option a random '0' keeps being displayed before it. Any help would be appreciated, here is the relevant code:
<div class="otherCars">
<label for="otherCars">Do you drive any other cars?</label>
<select name="otherCars" class="style1" id="carsSelect" onchange="getQuote()" onblur="validateSelect('cars')" >
<option value="empty">-Please select-</option>
<option value="10" id="car1">No access to any other cars </option>
<option value="20">Own another car</option>
<option value="100">Named driver on another policy</option>
<option value="100">Company car (including personal use)</option>
<option value="100">Company car (excluding personal use)</option>
</select>
</div><!-- Closing div tag-->
Javascript:
function getQuote(){
var disqualifiedDifference = 0;
var genderDifference = 0;
var carDifference = 0;
var menuSelect = document.getElementById("carsSelect");
var carValue = menuSelect.options[menuSelect.selectedIndex].value;
function genderPrice(){
if (document.getElementById("male").checked){
genderDifference += 200;
}
if (document.getElementById("female").checked){
genderDifference += 175;
}
}
function disqoPrice(){
if (document.getElementById("yes").checked){
disqualifiedDifference += 300;
}
if (document.getElementById("no").checked){
disqualifiedDifference += 0;
}
}
function carPrice(){
if (document.getElementById("car1").selected){
carDifference += 200;
}
if (document.getElementById("car2").selected){
carDifference += 20;
}
}
genderPrice();
disqoPrice();
var totalPrice = disqualifiedDifference + genderDifference + carDifference + carValue;
document.getElementById('totalPrice').innerHTML = totalPrice;
} //end of CalculateTotal

menuSelect.options[menuSelect.selectedIndex].value returns a string, which means that the + operator will be performing string concatenation rather than addition. Cast the value to a Number before trying to do arithmetic.
var carValue = +menuSelect.options[menuSelect.selectedIndex].value;
// ^ unary + operator casts a string to a number

Adding Option to Drop Down Value if it doesn't exist?

How can the code below be modified so as to allow a new value to be added to the drop down list, should the specified value not be found in the found in the drop down box?
Right now, I use the given function below to find a given value (option_name) in a drop down box.
I'd like to modify the negative flag (!flag) so as to instead of alerting me that it not has found the option_name, to basically add the new option_name in the existing drop down list.
ie.
get_position( 'drop', 'flower' )
<select id="drop" style="width: 200px;">
<option value="0"></option>
<option value="1">apples</option>
<option value="2">oranges</option>
<option value="3">pears</option>
<option value="4">mangos</option>
<option value="5">bananas</option>
<option value="6">kiwis</option>
</select>
function get_position(id,option_name) {
var flag = false;
for ( var i=0; i <= document.getElementById(id).options.length - 1; i++ ) {
if (document.getElementById(id).options[i].text === option_name) {
document.getElementById(id).selectedIndex = i;
flag = true;
}
}
}

you can use return false if any match found then add the record
function get_position(id,option_name) {
var flag = false;
var length=document.getElementById(id).options.length;
for ( var i=0; i <= length - 1; i++ ) {
if (document.getElementById(id).options[i].text == option_name) {
document.getElementById(id).selectedIndex = i;
return false;
}
}
//add item on drop down now
document.getElementById(id).options[length] = new Option( txt, length );
document.getElementById(id).selectedIndex = length;
}
if you can use Jquery then some thing like this
if($("#id option:contains('option_name')").length ==0)
{
$("#id").append(new Option("option text", "value"));
}