We Keep Coding

How can I get data-att from select tag after user select an option

HTML:
<div class="form-group ">
<select class="form-control input-sm col-xs-2 game-select" data-game="LuckyTuesday">
<option value="" disabled selected>Select Game </option>
<option id="1" data-name="Direct 1" data-minNumber="1" data-maxNumber="1">
Direct 1
</option>
<option id="2" data-name="Direct 2" data-minNumber="2" data-maxNumber="2">
Direct 2
</option>
</select>
</div>
JavaScript:
$('select').change(function () {
let gameType = $(this).find(':selected').attr('data-name');
//How to can I use "game-select" class to get "data-game" att?
});

You can get the value of data-game simply by using the data() jQuery function:
$(this).data('game');

Show second dropdown menu on change of first selected

I am trying to create a dropdown that will show a second when the first is selected.
<div id="prob_type_1" name="prob_type_1">
<label>Select Problem Type</label>
<select class="form-control required" type="select" title="" id="prob_type_1" name ="prob_type_1">
<?php if ($client_db_number < 15000) { ?>
<option value = "">-Please Select-</option>
<option value = "SS-20 Appliance">SS-20 Appliance</option>
<option value = "BBoxx Appliance">BBoxx Appliance</option>
</select>
</div>
<div id="SS-20 Appliance" class="warren" style="display: none;" onchange="ChangeDropdowns(this.value)">
<label>Select Appliance</label>
<select id="SS-20 Appliance" name ="prob_type_2">
<option value = "Lights">Lights</option>
<option value = "Television">Television</option>
</select>
</div>
<div id="BBoxx Appliance" class="warren" style="display: none;" onchange="ChangeDropdowns(this.value)">
<label>Select Appliance</label>
<select id="BBoxx Appliance" name ="prob_type_2">
<option value = "Lights">Lights</option>
<option value = "Television">Television</option>
<option value = "BBoxx Radio">BBoxx Radio</option>
<option value = "Bboxx USB Multi Charger">Bboxx USB Multi Charger</option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$("#prob_type_1").change(function(){
correspondingID = $(this).find(":selected").val()
$(".warren").hide();
$("#" + correspondingID).show();
})
</script>
the second menu just isn't showing when either of these is selected...
fiddle: https://jsfiddle.net/wazzahenry/6af6jd83/
based on this :http://jsfiddle.net/dKMzk/
and from this question: Show a second dropdown based on previous dropdown selection

You have a style: none for your multiple select. To solve this, instead of using $("#" + correspondingID).show();, I will rather change the style of the element.
You are declaring your id with an espace character. It is as if you are declaring differents ids for the same element. To solve this, I removed the space character in the ids .
$("#prob_type_1").change(function(){
var correspondingID = $(this).find(":selected").val()
$(".warren").hide();
correspondingID = correspondingID.replace(" ", "")
$("#" + correspondingID).css("display", "inherit");
})
<div id="prob_type_1" name="prob_type_1">
<label>Select Problem Type</label>
<select class="form-control required" type="select" title="" id="prob_type_1" name ="prob_type_1">
<?php if ($client_db_number < 15000) { ?>
<option value = "">-Please Select-</option>
<option value = "SS-20 Appliance">SS-20 Appliance</option>
<option value = "BBoxx Appliance">BBoxx Appliance</option>
</select>
</div>
<div id="SS-20Appliance" class="warren" style="display: none;" onchange="ChangeDropdowns(this.value)">
<label>Select Appliance</label>
<select id="SS-20 Appliance" name ="prob_type_2">
<option value = "Lights">Lights</option>
<option value = "Television">Television</option>
</select>
</div>
<div id="BBoxxAppliance" class="warren" style="display: none;" onchange="ChangeDropdowns(this.value)">
<label>Select Appliance</label>
<select id="BBoxx Appliance" name ="prob_type_2">
<option value = "Lights">Lights</option>
<option value = "Television">Television</option>
<option value = "BBoxx Radio">BBoxx Radio</option>
<option value = "Bboxx USB Multi Charger">Bboxx USB Multi Charger</option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Opencart change default value of list

I have a list where you can choose an option. I need to change default value to my own. Is it possible in Opencart?
<div class="form-group required" id="form1">
<label class="control-label" for="input-option227">Choose</label>
<select name="option[227]" id="frmdocumentsForm-r1" class="form-control" wtx-context="0128A83E-7CFB-40AA-836C-8D17569841BF">
<option value=""> --- Please choose an option --- </option>
<option value="17">AAAA</option>
<option value="18">BBB</option>
<option value="19">CCC</option>
<option value="44">DDD</option>
</select>
</div>
I need to change value "17" -> "AAA"
Thanks

change attribute value with loop . If you need replace only 1st value 17 check for if condition.
$( "select > option").each(function() {
$(this).attr('value',$(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value=""> --- Please choose an option --- </option>
<option value="17">AAAA</option>
<option value="18">BBB</option>
<option value="19">CCC</option>
<option value="44">DDD</option>
</select>

HTML/JS/Django Hiding incompatible options from two picklists

I'm running a filter for my object on a django-run website.
I have two select fields, with dropdowns based on related models to my model that i'd like to sort.
The problem is that some options are incompatible with each another and i'd like to hide the options of the second picklist based on what the user has selected on the first one.
I feel like i am going to use some JS but i've never used it before.
1st picklist: tasks <option value = task_id>
2nd picklist: crafts <option value = craft_id>
I have prepared a dictionnary that holds all the compatible values of any option selected on the first picklist, if that can help !
useful_dictionnary = {
first_task_id = [list_of_compatible_craft_ids]
...
last_task_id = [list_of_compatible_craft_ids]
}
How can i get JS to look at the task_id selected on the first picklist, and hide the options from the second picklist that are not in this list ?
Would be great! Thanks !
Here is my picklists code, if that helps
<div class="form-group col-sm-4 col-md-3">
<label for="id_tasks">Tasks:</label>
<select class="form-control" id="id_tasks" name="task">
<option value="">---------</option>
<option value="1" selected="selected">Tie-job: Front-tie Marker</option>
<option value="2">Tie-job: Scrapmachine support trackman</option>
<option value="3">Tie-job: Plate Thrower</option>
<option value="4">Tie-job: New-tie Marker</option>
</select>
</div>
<div class="form-group col-sm-4 col-md-3">
<label for="id_craft">Craft:</label>
<select class="form-control" id="id_craft" name="craft">
<option value="" selected="selected">---------</option>
<option value="1">Senior Engineer</option>
<option value="2">Roadmaster</option>
<option value="3">Foreman</option>
<option value="4">Assistant Foreman</option>
<option value="5">Electrical Welder EA</option>
<option value="6">Oxygen Welder OA</option>
<option value="7">Railway Machine Operator (RMO)</option>
<option value="8">Truck Driver (Type A, B or C)</option>
</select>
</div>

This snippet should do the trick. Change compatibleIds to map the options for the second select based on the first one.
$(document).ready(function(){
$("#id_craft option:not([value=0])").hide();
});
$("#id_tasks").change(function(){
$("#id_craft").val("0");
$("#id_craft option:not([value=0])").hide();
var compIds = { 1: [ 1,2,3,4,5], 3 : [ 4,2,3,8,7], 4 : [ 7,9,1,5], 2 :[5,3,1,8]};
for(var i = 0; i < compIds[$("#id_tasks").val()].length; i++){
$("#id_craft option[value=" + compIds[$("#id_tasks").val()][i] + "]").show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-sm-4 col-md-3">
<label for="id_tasks">Tasks:</label>
<select class="form-control" id="id_tasks" name="task">
<option value="0" selected="selected">---------</option>
<option value="1">Tie-job: Front-tie Marker</option>
<option value="2">Tie-job: Scrapmachine support trackman</option>
<option value="3">Tie-job: Plate Thrower</option>
<option value="4">Tie-job: New-tie Marker</option>
</select>
</div>
<div class="form-group col-sm-4 col-md-3">
<label for="id_craft">Craft:</label>
<select class="form-control" id="id_craft" name="craft">
<option value="0" selected="selected">---------</option>
<option value="1">Senior Engineer</option>
<option value="2">Roadmaster</option>
<option value="3">Foreman</option>
<option value="4">Assistant Foreman</option>
<option value="5">Electrical Welder EA</option>
<option value="6">Oxygen Welder OA</option>
<option value="7">Railway Machine Operator (RMO)</option>
<option value="8">Truck Driver (Type A, B or C)</option>
</select>
</div>
Small add-on as the original question was about a django dictionary object:
To use a django list or dictionnary in the javascript, it is pretty straightforward as the {{ django_variable }} works fine inside the script tags.
So the final JS for this django template page is:
$(document).ready(function(){
$("#id_craft option:not([value=0])").hide();
});
$("#id_tasks").change(function(){
$("#id_craft").val("0");
$("#id_craft option:not([value=0])").hide();
var compatibleIds = {{ my_python_dictionary }};
for(var i = 0; i < compatibleIds[$("#id_tasks").val()].length; i++){
$("#id_craft option[value=" + compatibleIds[$("#id_tasks").val()][i] + "]").show();
}
});

Dynamic select options in ng-repeat

I would like to have a dynamic select option values bind to select dropdown.
<div ng-repeat="condition in conditions">
<div class="form-group">
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option ng-value="{{age.Description}}" ng-repeat="age in ageConditions">{{age.Description}}</option>
</select>
</div>
</div>
I like
age in ageConditions
to be dynamic. I also tried ng-options="dynamicOptions" but it always bind to the same list.
I want to achieve this with ng-repeat.
Repeat 1:
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option ng-value="ageCondition1">ageCondition1</option>
<option ng-value="ageCondition2">ageCondition2</option>
</select>
Repeat 2:
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option ng-value="yearsCondition1">yearsCondition1</option>
<option ng-value="yearsCondition2">yearsCondition2</option>
</select>
As shown i want the option in select to be dynamic in ng-repeat.
Any idea?

<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option value="getValue(age, $parent.$index)" ng-repeat="age in ageConditions"> getText(age, $parent.index)</option>
</select>
Please note that $parent.$index is used.
the dynamic nature van be achieved used functions which return the value based in $index.
$scope.getValue = function(age, index) {
if(index === 1) return age.Desciption else age.years;
}
$scope.getText = function(age, index) {
if(index === 1) return age.Desciption else age.years;
}
hope this helps

Solved this by creating a directive that created a new scope for select.