We Keep Coding

How to add an attribute to select option with javascript, jquery or css?

I'm having some html which is generated automatically, so I can't change it in the html directly. But it's basically this:
<select name="field2" id="id_18_gen" >
<option value="{1,2}" >Please choose...</option>
<option value="1" >correct</option>
<option value="2" >false</option>
</select>
Now I would like to add the hidden and the disabled attribute to the first option:
<option value="{1,2}" hidden disabled >Please choose...</option>
I've tried several things for example:
let e = document.getElementById(element);
e.options["{1,2}"].hidden ="true";
or
$("#" +element+ "option[value=" + "{1,2}" + "]").hide();
But nothing worked. A javascript or Jquery solution would be great, but css would be alright too.

check if the below code works
let e = document.getElementbyId('id_18_gen').firstElementChild;
e.disabled = true;
e.style.visibility = 'hidden';

Use setAttribute() method.
firstop.setAttribute("hidden","");
firstop.setAttribute("disabled","");
var firstop = document.querySelector("#id_18_gen option:first-child");
firstop.setAttribute("hidden","");
firstop.setAttribute("disabled","");
<select name="field2" id="id_18_gen" >
<option value="{1,2}" >Please choose...</option>
<option value="1" >correct</option>
<option value="2" >false</option>
</select>

e.setAttribute('attribute', value).
To select an specific option, it's e.options[index] or e.options.item(index) (the same) or by it's id width e.options.namedItem(id).setAttribute(....)
To find a specific option by value:
e.options.map((option, index) => {
if (option.value == '{1,2}')
option.setAttribute('hidden', true);
})
or better with queryselector:
document.querySelector('#id_18_gen option[value={1,2}]')

In jQuery, you can use:
$('#id_18_gen option').first().attr({"hidden":"","disabled":""});
$(function() {
const firstOpt = $('#id_18_gen option').first();
console.log( "Before:", firstOpt[0] );
firstOpt.attr({"hidden":"","disabled":""});
console.log( "After:", firstOpt[0] );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="field2" id="id_18_gen" >
<option value="{1,2}" >Please choose...</option>
<option value="1" >correct</option>
<option value="2" >false</option>
</select>

Reset value or set to default selected option jQuery

I'm trying to reset the value of closest select option.
$(document).ready(function () {
$('.limitation_points').hide();
$('.field .limitSelected').each(function () {
$(this).change(function () {
var selected = $(this).val();
if (selected == '1') {
$(this).closest('.field').find('.limitation_points').fadeIn(200);
} else {
$(this).closest('.field').find('.limitation_points').fadeOut(200);
$(this).closest('.field').find('input[name="pillers[]"]').val("");
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
<input id="limitation1" type="radio" class="limitSelected" name="limitation" value="1" />Yes
<input id="limitation2" type="radio" class="limitSelected" name="limitation" value="0" />No
<select id="pijlers" class="pillers" name="pillers[]">
<option class="placeholder" selected disabled>Make Choice</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
Till fadeIn fadeOut my code is working how it should. But This code does't reset the value of select options when value has "0".
Can anyone help me with this, what i am doing wrong here?
Thanks in advance.

Using "-1" as default value and also using select instead of input as your selector, should do the trick.
$(document).ready(function () {
$('.limitation_points').hide();
$('.field .limitSelected').each(function () {
$(this).change(function () {
var selected = $(this).val();
if (selected == '1') {
$(this).closest('.field').find('.limitation_points').fadeIn(200);
} else {
$(this).closest('.field').find('.limitation_points').fadeOut(200);
$(this).closest('.field').find('select[name="pillers[]"]').val("-1");
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
<input id="limitation1" type="radio" class="limitSelected" name="limitation" value="1" />Yes
<input id="limitation2" type="radio" class="limitSelected" name="limitation" value="0" />No
<select id="pijlers" class="pillers" name="pillers[]">
<option class="placeholder" value="-1" selected disabled>Make Choice</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>

Add value attribute to the default <option> and remove disabled.
When you use the empty string reset there is no matching option for it
<option value="" class="placeholder" >Make Choice</option>

Check radio button only if and when a dropdown list element is selected

I have this jquery to check a radio button on page load:
$('input[value="modelos"]').attr('checked',true);
And then I have a dropdown list:
<select id="talents_meta_category" name="talents_meta_category">
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
How can I have input[value="modelos"] checked only if and when <option value="tab_1495127126289">Modelos</option> is selected?

You need on change condition with if like this :
$("select#talents_meta_category").change(function () {
if ($(this).val() === "tab_1495127126289") {
$('input[value="modelos"]').attr('checked',true);
}else{
$('input[value="modelos"]').attr('checked',false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="talents_meta_category" name="talents_meta_category">
<option value="">Please Select</option>
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
</br>
<input type="checkbox" name="modelos 1" value="modelos"> modelos 1<br>
<input type="checkbox" name="modelos 2" value="modelos"> modelos 2<br>
<input type="checkbox" name="modelos 3" value="modelos"> modelos 3<br>
Checkbox dynamically change based on condition (select option value)

You can try this, but I had to put in a blank option into the menu, however if that's unacceptable let me know and I'll do something else.
$("select#talents_meta_category").change(function () {
if ($(this).val() === "tab_1495127126289") {
$('input[value="modelos"]').attr('checked',true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="talents_meta_category" name="talents_meta_category">
<option></option>
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
<input type="radio" value="modelos">

You can check whether a option by testing the value attribute of the select
$(function(){
if($('#talents_meta_category').val()){
$('input[name="favorites"][value="modelos2"]').attr('checked',true);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="talents_meta_category" name="talents_meta_category">
<option value=""></option>
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463" selected>Música</option>
</select>
<label for="modelos"><input type="radio" name="favorites" value="modelos"></label>
<label for="modelos"><input type="radio" name="favorites" value="modelos2"></label>

You can use onchange function.
$("#talents_meta_category").on('change',function(){
let value = $(this).children("option:selected").val();
if(value=="tab_1495127126289"){
$('input[value="modelos"]').attr('checked',true);
}else{
$('input[value="modelos"]').attr('checked',false);
}
});

Something like this should do the trick:
// Your check the radio on page load
$('input[value="modelos"]').attr('checked', true);
// Check if `modelos` is selected
if ($('input[value="modelos"]').prop('checked')) {
// Add the `selected` attribute to the <option />
$('option[value="tab_1495127126289"]').attr('selected', true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='radio' value='modelos' />
<select id="talents_meta_category" name="talents_meta_category">
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
Hope this helps,

You can do it many different ways, here is just one....
var checkMe = 'tab_1495127126289';
$(function(){
$('input[name=talents_meta_category][value=' + checkMe + ']').prop('checked',true)
});

get selected checked value from patosai tree multiselect

Im trying to get value from checkbox that has been checked, but for some reason the value is shuffled in some weird pattern
here jsfiddle (try to check fruit and then click disable)
<input id="checkedTree" type="text"/>
<select id="test-select" onchange="getCheckedTree()">
<option value="1" data-section="fruit">Banana</option>
<option value="2" data-section="fruit">Apple</option>
<option value="3" data-section="fruit">Avocado</option>
<option value="4" data-section="fruit">Pineapple</option>
<option value="5" data-section="fruit">PenPineappleApplePen</option>
<option value="6" data-section="animal">Tiger</option>
<option value="7" data-section="animal">Lion</option>
<option value="8" data-section="animal">Pitbull</option>
<option value="9" data-section="animal">OrangUtan</option>
<option value="10" data-section="animal">Marsupilami Yellow cartoon</option>
</select>
I need to know why is it happened, and how to fix it. i do know the other way to get proper value like this. But for my project case i need "for" method
Update 1-> update jsfiddle

Values shuffled because you are getting the input array index checkedText.value = selectobject[z].value; knowing that at the change event the order of your hidden inputs change which causes the wrong values . (you can check by setting test-select display :block after page loding )
Above a working snippet :
note that you can passe directly value (1,2,3.. ) to the checkedTree input to disable directly inputs .
$( document ).ready(function() {
var $select = $('#test-select');
$select.treeMultiselect({
enableSelectAll: true,
sortable: false,
searchable: true,
startCollapse: true
});
});
function getCheckedTree(){
var tempCtr=0;
var $checkedText = $("#checkedTree");
var selectobject = $("[id*=treemultiselect-0-]:checked");
$checkedText.val("");
for(i=0;i<selectobject.length;i++) {
if(tempCtr==0){
tempCtr=1;
$checkedText.val($(selectobject[i]).parent().data("value"));
}else{
$checkedText.val($checkedText.val() + $(selectobject[i]).parent().data("value"));
}
}
}
function funcDis(){
var $checkedText = $("#checkedTree");
if($checkedText.val().length>0) {
$checkedText.val().split("").forEach(function(val){
$(".tree-multiselect .item[data-value="+val+"] input").prop('disabled', true);
$("#test-select option[value="+val+"]").prop('disabled', true);
})
};
}
function enableAll(){
$(".tree-multiselect input").each(function(idx){
$(this).prop('disabled', false);
var val = $(this).parent().data("value");
$("#test-select option[value="+val+"]").prop('disabled', false);
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="//cdn.rawgit.com/patosai/tree-multiselect/v2.1.3/dist/jquery.tree-multiselect.min.css" rel="stylesheet"/>
<script src="//cdn.rawgit.com/patosai/tree-multiselect/v2.1.3/dist/jquery.tree-multiselect.min.js"></script>
<input id="checkedTree" type="text"/> <button onclick="funcDis()">disable</button><button onclick="enableAll()">enable all</button>
<select id="test-select" onchange="getCheckedTree()">
<option value="1" data-section="fruit">Banana</option>
<option value="2" data-section="fruit">Apple</option>
<option value="3" data-section="fruit">Avocado</option>
<option value="4" data-section="fruit">Pineapple</option>
<option value="5" data-section="fruit">PenPineappleApplePen</option>
<option value="6" data-section="animal">Tiger</option>
<option value="7" data-section="animal">Lion</option>
<option value="8" data-section="animal">Pitbull</option>
<option value="9" data-section="animal">OrangUtan</option>
<option value="10" data-section="animal">Marsupilami Yellow cartoon</option>
</select>
PS:You can pass dirctly an array of value to funcDis and disable input at start up .
That's all ,I fiddle if you want.

Issue in Fetch the color from dropdown option in jQuery

I want to fetch the color on change event of dropdown value.
following is the structure of dropdown.
<select id="task_result_task_result_status_id" name="task_result[task_result_status_id]" style="color: #57a90f;">
<option value="" style="color: #696762;">Please Select</option>
<option value="1" style="color: #000000;">In Progress</option>
<option value="6" style="color: #000000;">Test</option>
<option value="3" style="color: #57a90f;" selected="selected" data-completion-status="">Completed/Compliant/Yes</option>
<option value="2" style="color: #e11d2b;" data-completion-status="">Not Completed/Non Compliance/No</option>
<option value="4" style="color: #fa7603;" data-completion-status="">Not Applicable</option>
<option value="7" style="color: #ef0707;" data-completion-status="">Test Complete</option>
Code-
var statusSelect = jQuery('#task_result_task_result_status_id');
statusSelect.change(function () {
alert($( '#' + status_select_id+ ' option:selected' ).css('color'));
var selected = statusSelect.find('[value="' + statusSelect.val() + '"]');
if (selected.length > 0)
alert(selected.css('color'));
});
both alert return rgb(255,255,255).
May In know where is the Issue?

In this plnkr you can see a partial solution
$(document).ready(function() {
var statusSelect = jQuery('#task_result_task_result_status_id');
statusSelect.on("change",function () {
alert($( "#task_result_task_result_status_id option:selected" ).css('color'));
});
});