We Keep Coding

can I set the select option using anything other than value in javascript

I have a pick list like the following:
<select multiselect="false" name="some.name" size="1" id="queuePicklist"
onchange="setQueue();" required="true">
<option id="selectOption" hidden="true" disabled="true" selected="true" value=""
style="display: none">Select an option</option>
<option value="1" label="Support">Support</option>
<option value="2" label=" Team Sales">Team Sales</option>
<option value="1" label="Individual Sales">Individual Sales</option>
<option value="1" label="Billing">Billing</option>
<option value="1" label="Other">Other</option>
</select>
I want to know if it's possible that in setQueue() function select one of the options without using the value? So instead of document.getElementById("queuePicklist").value = 'Support';
Can I add a data attribute to the options and select the option that way so I can keep the values as they are. Note: as seen in the example four of the options have the same value.
I know I can put these values (1,2,1,1,1) into the data attribute and use unique values in the 'value' field and that was my first approach but since I'm working with some legacy code, that change made other parts of other codes to break.

I'm not exactly sure what or how you want to get an option, but you can access the text like this.
function setQueue() {
var selectEle = document.getElementById("queuePicklist");
// .options returns an HTMLOptionsCollection object.
// use the selectedIndex property to get the selected option, then
// you can access the text or value.
console.log(selectEle.options[selectEle.selectedIndex].text);
}
<select multiselect="false" name="some.name" size="1" id="queuePicklist" onchange="setQueue();" required="true">
<option id="selectOption" hidden="true" disabled="true" selected="true" value="" style="display: none">Select an option</option>
<option value="1" label="Support">Support</option>
<option value="2" label=" Team Sales">Team Sales</option>
<option value="1" label="Individual Sales">Individual Sales</option>
<option value="1" label="Billing">Billing</option>
<option value="1" label="Other">Other</option>
</select>

how can i change the value of checkbox when i select a value from select input with js

i want to learn that when i select a value from select input how can i change the value of checkbox.
<input type="checkbox" name="id" value="" id="mycheckbox1">
<select name="cat-1" id="myselectbox1">
<option value="">Choose</option>
<option value="100">Value1</option>
<option value="200">Value2</option>
</select>

Why would you want to?
Anyway:
window.addEventListener("load", function() { // on page load
document.getElementById("myselectbox1").addEventListener("change", function() {
document.getElementById("mycheckbox1").value = this.value;
});
document.getElementById("mycheckbox1").addEventListener("change", function() {
console.log(this.value);
});
});
<input type="checkbox" name="id" value="" id="mycheckbox1">
<select name="cat-1" id="myselectbox1">
<option value="">Choose</option>
<option value="100">Value1</option>
<option value="200">Value2</option>
</select>

function updateCheckbox() {
var val = document.getElementById("myselectbox1").value;
document.getElementById("mycheckbox1").checked = true;
document.getElementById("mycheckbox1").value = val;
}
<input type="checkbox" name="id" value="" id="mycheckbox1">
<select onChange="updateCheckbox()" name="cat-1" id="myselectbox1">
<option selected disabled>Choose</option>
<option value="100">Value1</option>
<option value="200">Value2</option>
</select>

may i ask one more question
i changed my checkbox value if i have one more select input which id cat-2
how can i change name of cat-2 to chosen value of cat-1
For example;
if i choose value1 ( its value=100)
i want to change name of cat-2 to cat-100
```
<input type="checkbox" name="id" value="" id="mycheckbox1">
<select name="cat-1" id="myselectbox1">
<option value="">Choose</option>
<option value="100">Value1</option>
<option value="200">Value2</option>
</select>
<select name="cat-2" id="myselectbox2">
<option value="">Choose</option>
<option value="300">Value3</option>
<option value="400">Value4</option>
</select>
```

Get selected value of datalist option value using javascript

I need to add some values from a HTML5 DataList to a <select multiple> control just with Javascript. But I can't guess how to do it.
This is what I have tried:
<input id="SelectColor" type="text" list="AllColors">
<datalist id="AllColors">
<option label="Red" value="1">
<option label="Yellow" value="2">
<option label="Green" value="3">
<option label="Blue" value="4">
</datalist>
<button type="button" onclick="AddValue(document.getElementById('AllColors').value, document.getElementById('AllColors').text);">Add</button>
<select id="Colors" size="3" multiple></select>
function AddValue(Value, Text){
//Value and Text are empty!
var option=document.createElement("option");
option.value=Value;
option.text=Text;
document.getElementById('Colors').appendChild(option);
}

This should work. I have moved the value selection logic into the method itself.
You will only get the value from the input. You will need to use the value to select the label from the datalist.
function AddValue(){
const Value = document.querySelector('#SelectColor').value;
if(!Value) return;
const Text = document.querySelector('option[value="' + Value + '"]').label;
const option=document.createElement("option");
option.value=Value;
option.text=Text;
document.getElementById('Colors').appendChild(option);
}
Here is the working demo.

You can check the trimmed value of the input. If value is not empty then you can get the selected data list option by matching the value attribute with querySelector().
Try the following way:
function AddValue(el, dl){
if(el.value.trim() != ''){
var opSelected = dl.querySelector(`[value="${el.value}"]`);
var option = document.createElement("option");
option.value = opSelected.value;
option.text = opSelected.getAttribute('label');
document.getElementById('Colors').appendChild(option);
}
}
<input id="SelectColor" type="text" list="AllColors">
<datalist id="AllColors">
<option label="Red" value="1"></option>
<option label="Yellow" value="2"></option>
<option label="Green" value="3"></option>
<option label="Blue" value="4"></option>
</datalist>
<button type="button" onclick="AddValue(document.getElementById('SelectColor'), document.getElementById('AllColors'));">Add</button>
<select id="Colors" size="3" multiple></select>

To get the selected options's ID in datalist, you can use this code too.
<input id="SelectColor" type="text" list="AllColors">
<datalist id="AllColors">
<option value="Red" id=1></option>
<option value="Yellow" id=2></option>
<option value="Green" id=3></option>
<option value="Blue" id=4></option>
</datalist>
<script>
$("#SelectColor").change(function(){
var el=$("#SelectColor")[0]; //used [0] is to get HTML DOM not jquery Object
var dl=$("#AllColors")[0];
if(el.value.trim() != ''){
var opSelected = dl.querySelector(`[value="${el.value}"]`);
alert(opSelected.getAttribute('id'));
}
});
</script>

if choose this option and this option change to 3 option

I have a table rows (this is not real, this is only example for simple it):
id, cat, company, device.
for example some recordes:
1, computer, samsung, ativ
2, computer, lg, blabla
3, phones, samsung, s6
4, phones, sony, z5
I want that if I choose category (computer for example) this will open only the company that they have computer, In addition, when the user select the second select, this will give the option that remain.
I found here the answer for the first select but for the second I did find.
I dont want to do "if ..., if ..." because this is need to be from the database and automatic.
This is the example that i did:
http://jsfiddle.net/e464etcq/
HTML:
<select class="form-control" id="type" name="type">
<option value="">choose</option>
<option value="1">phones</option>
<option value="2">computers</option>
</select>
<select class="form-control" id="reason" name="reason">
<option value="">choose</option>
<option value="1" class="1">samsung</option>
<option value="2" class="1">lg</option>
<option value="3" class="2">samsung</option>
<option value="3" class="2">sony</option>
</select>
<input type="text" id="billing">
JQUERY:
jQuery(function($) {
var backupShipStates = $("#reason").html();
$("#type").change(function() {
var country = $(this).val();
var options = $(backupShipStates).filter(function() {
return !$(this).attr("class") || $(this).attr("class") == country; });
$("#reason").html(options);
});
});
do you have any suggition how to do it?
Thank you,
Omry.

If I've understand you, you could add a new change event to handle when the second select is changed.
So your code would be:
HTML
<select class="form-control" id="type" name="type">
<option value="">בחר</option>
<option value="1">phones</option>
<option value="2">computers</option>
</select>
<select class="form-control" id="reason" name="reason">
<option value="">choose</option>
<option value="1" class="1">samsung</option>
<option value="2" class="1">lg</option>
<option value="3" class="2">samsung</option>
<option value="3" class="2">sony</option>
</select>
<select class="form-control" id="third" name="third">
<option value="">choose</option>
<option value="1" class="1">Option3.1</option>
<option value="2" class="1">Option3.2</option>
<option value="3" class="2">Option3.3</option>
<option value="3" class="2">Option3.4</option>
</select>
<input type="text" id="billing">
jQuery
jQuery(function($) {
var backupShipStates = $("#reason").html();
var backupOption3 = $("#third").html();
$("#type").change(function() {
var country = $(this).val();
var options = $(backupShipStates).filter(function() {
return !$(this).attr("class") || $(this).attr("class") == country; });
$("#reason").html(options);
});
$("#reason").change(function(){
var reason = $(this).val();
var options = $(backupOption3).filter(function() {
return !$(this).attr("class") || $(this).attr("class") == reason; });
$("#third").html(options);
});
});
Here is not necessary PHP.

How to validate multiple drop down list in jquery

HTML :
<select type="text" class="que_ans" name="answer[12]" id="answer_12" size="1">
<option value="0" selected> -- Select Response -- </option>
<option value="1">Not Satisfied</option>
<option value="2">Somewhat Satisfied</option>
</select>
<select type="text" class="que_ans" name="answer[13]" id="answer_13" size="1">
<option value="0" selected> -- Select Response -- </option>
<option value="1">Not Satisfied</option>
<option value="2">Somewhat Satisfied</option>
</select>
How to validate the drop down list using array name answer[12] ?

Add class and title attributes on your dropdown element like:
<select type="text" class="que_ans required" name="answer[12]" id="answer_12" size="1" title="This is required field" >
<option value="0" selected> -- Select Response -- </option>
<option value="1">Not Satisfied</option>
<option value="2">Somewhat Satisfied</option>
</select>
<select type="text" class="que_ans required" name="answer[13]" id="answer_13" size="1" title="This is required field">
<option value="0" selected> -- Select Response -- </option>
<option value="1">Not Satisfied</option>
<option value="2">Somewhat Satisfied</option>
</select>
And add following script at the end of your page
<script>
$('select.required').each(function () {
var message = $(this).attr('title');
if($(this).val() == '' || $(this).val() == 0) {
alert(message);
$(this).focus();
breakout = true;
return false;
}
}
});
</script>
I hope, it will fulfill your requirement.

you could use attribute selector $(select[name="answer[12]"]) for specific ones
or more generic $(select[name]) to select all <select> with name attribute.
also val() method can be used for the getting the selected item.
eg: $(select[name="answer[12]"]).val()