We Keep Coding

select dropdown option based on dropdown option

To be honest, I have never touched Javascript before today. On basic search I have seen a few scripts use the change function but the samples seem very specific (using .indexOf and changing numbers/text boxes doesn't apply here).
removed
You can ignore the code that's there. essentially what I'm looking for is when 1 (disease) becomes yes, 6 option is changed to patient, and if 6 (poster_type) value = patient then 7 is selected as yes.
If someone could walk me through the change function that'd be fine too.
removed

Code and explanation below
So, the code says whenever disease dropdown is changed
if its selected value is "1"
change the poster_type dropdown to Patient.
change the patient_exp dropdown to "1"
else
change the poster_type dropdown to Unknown.
change the patient_exp dropdown to "0"
$("select[name='disease']").change(function(){
if($("select[name='disease']").val() == "1"){
$("select[name='poster_type']").val("Patient");
$("select[name='patient_exp']").val("1");
}
else
{
$("select[name='poster_type']").val("Unknown");
$("select[name='patient_exp']").val("0");
}
});
For change in value of poster_type dropdown,
if current selected value in poster_type is Patient
set value of patient_exp dropdown to "1"
else
set value of patient_exp dropdown to "0"
$("select[name='poster_type']").change(function(){
if($("select[name='poster_type']").val() == "Patient")
{
$("select[name='patient_exp']").val("1");
}
else
{
$("select[name='patient_exp']").val("0");
}
});

Basically you need to bind to the change event:
$('select[name=disease]').on('change', function(e){
// here the user have changed the value
});
Then you can get current value with val():
$('select[name=disease]').val();
// yes or no
Val is also the method you use to change an input value:
$('input[name=myInput]').val('newVal');
So you're looking for something like this:
$('select[name=disease]').on('change', function(e){
if($('select[name=disease]').val() === 'yes'){
$('input[name=myInput]').val('my-new-value');
}
});

validate error message not displaying for drop down list when not selected

Please bear with me as I am not sure what I have done wrong here:
Basically I have a form and I have some drop down lists.
If I hard code the select list for my drop down list with styleClass="requiredinpfield" then I will get a proper validation error message pops up below the select list whenever I don't select an option from the list and if I try hit submit button.
However, because some of the drop down lists are not always required (they only required when certain option was selected) so in this case I am not hard coding these select lists to have styleClass="requiredinpfield" but instead I am using jQuery to dynamically add the requiredinpfield class to the list object whenever an associate radio button was selected.
The problem I am having now is this won't show the validation error message when I don't select any option and try to hit the Submit button. It prevent me from continue, however. Its just I don't get to see the error message. Can you see what I have done wrong?
Here is an example of how I use jQuery to add the requiredinpfield class and it is not showing me the validation error message when needed:
HTML
<div id="fruitDivId">
<apex:inputField id="testPickList" value="{!PickTheFruitYouLike__c}" styleClass="selectpicker"/>
</div>
A radio button to confirm that the list is needed
<apex:selectRadio value="{!DoYouLikeFruit}" onchange="whenAnOptionWasSelectedAndINeedToAddRequiredInpField(this.value,'fruitDivId');" styleClass="requiredinpfield radio pa-cus pa-cus-other">
Script to add requiredinpfield class
function whenAnOptionWasSelectedAndINeedToAddRequiredInpField(t,divId)
{
if (t == 'Yes' ){
$('[id$='+divId+']').show();
$('[id$="testPickList"]').addClass('requiredinpfield');
}
else{
$('[id$='+divId+']').hide();
$('[id$="testPickList"]').removeClass('requiredinpfield');
}
}
Script to validate
Note: my submit button will trigger the !checkRequired() method.
function checkRequired(){
var isValidate = true;
//$('.errorIcon').css('opacity', '0');
$('.requiredinpfield').each(function(){
if($(this).is("select") && $(this).val() == ''){
/*alert("Hello!!");*/
if(!($(this).next('.requiredinpfield').first().next('.errorMsg').size()>0)){
console.log($(this).next('.requiredinpfield'));
$(this).next('.requiredinpfield').first().after('<div class="errorMsg"><strong></strong> You must select an option</div>');
}
isValidate = false;
}
else{
if($(this).is("select") && (($(this).next('.requiredinpfield').first().next('.errorMsg').size()>0)))
{
$(this).next('.requiredinpfield').first().next('.errorMsg').remove();
}
}
});
//alert(isValidate);
return isValidate;
}

Assuming that the rest of the code is correct, the problem might in the way you are selecting elements by ID
in jQuery, to select an element by id simply write
$('#idoftheelement')
so in your whenAnOptionWasSelectedAndINeedToAddRequiredInpField function,
try replacing
$('[id$='+divId+']')
with
$('#'+divId)
do the same at all locations where you are selecting by id.

Removing an option from all other chosen multiple dropdowns, when selected on a particular dropdown

I have attached a JS Fiddle link here:
http://jsfiddle.net/p0b4j5o8/18/
If you check the fiddle link, you will see that I have written JavaScript/jQuery code (a function named add_mitigator()) in the HTML section.
When I used to write the code in the JavaScript section, Firebug used to trigger an error stating function add_mitigator() isn't defined.
But when I wrote the same in the HTML section instead, it runs with no problem. I am not much accustomed with JS Fiddle. How can I write a function in function_name() format in the fiddle?
In my JS Fiddle, there is a dropdown (chosen multiple) with options 1 to 10. When I click on the add_mitigator link, it creates/appends a new chosen dropdown.
Suppose I have three dropdowns, then if I select 2 from dropdown 1, then the other dropdowns will have 2 removed from their options. When I will unselect the 2 from the first dropdown, then 2 will again be available in the other two dropdowns. This should act vice-versa. When 2 is selected from any dropdown, then it is unavailable for all other dropdowns.
How can I achieve this?

By calling the function below on the select box change event the options will be disabled/enabled as per your requirements.
function disableSelectedValues() {
var cssOptions = [];
$(".input_field.criteria_countries option").removeAttr("disabled");
$.each($(".input_field.criteria_countries"), function(index, select) {
cssOptions = [];
var values = $(select).val();
if (values) {
for (var i = 0; i < values.length; i++) {
cssOptions.push("option[value=" + values[i] + "]");
}
}
console.log("test");
if (cssOptions.length) {
// disable all options with the selected values
$(".input_field.criteria_countries "
+ cssOptions.join(",.input_field.criteria_countries ")).attr("disabled", true);
// enable all options with the selected values for the current select
$(select).find(cssOptions.join()).removeAttr("disabled");
}
});
}
With .chosen you can listen to onchange events with .chosen().change();.
In the .chosen().change() event you then need to tell all of the select boxes to update once a value has changed. By using .trigger("chosen:updated"); on the select box selectors whenever a change event is fired, the select boxes will update.
NOTE that you will need to call the disableSelectedValues() function whenever you add a select box to have its options disabled on creation.
http://jsfiddle.net/p0b4j5o8/22/

How to set the value of a select box when it is enabled only?

I have a top level select box that when a user makes a selection here, I want this value to be used for all the below select boxes relating to this top level box.
The problem I am having is that, if any one of the lower select boxes is disabled, I want the above process to ignore this select box as it has already been assigned a value.
Obviously, if the lower select box is enabled then I want to assign the top select value to it.
To disable the select list based on a particular value, I have used:
$("select[name=f03]").eq(index).attr('disabled', 'disabled');
Here is the jQuery that I have used but is not working:
var top_select = $("select[name=f07]").val();
$("select[name=f03]").each(function(index){
if $("select[name=f03]").eq(index).is(':enabled'){
$("select[name=f03]").eq(index).val(top_select);
}
});
From this code, it is the lower selects ([name=f03]) that I am trying to set only when it is enabled.

First I would disable select like this:
$("select[name=f03]").eq(index).prop('disabled', true);
Second, your function should be much simpler:
$("select[name=f03]").each(function(){
if ($(this).prop('disabled')) return;
$(this).val(top_select);
});

you should use jquery :enabled selector as follow
$("select[name=f03]:enabled").each(function(){
//execution
});
or
$("select[name=f03]:enabled").val("value");
here is jsfiddle example http://jsfiddle.net/kso2oqr5/1/

When you are disabling elements use .prop(property,value)
var top_select = $("select[name=f07]").val();
$('select[name="f03"]').val(function(){
if(!this.disabled){
return top_select;
}
});
DEMO

How to trigger an event ONLY if both dropdowns are selected?

I have a dropdown select list on my page of class="TypeFilter".
I have a jQuery event that fires when a value in that list is selected.
$(".TypeFilter").change(function()
{
// Extract value from TypeFilter and update page accordingly
));
I now have to add another list to the page, and I want to implement functionality which will prevent the .change(function() from running unless both are selected.
In both lists the first option in the list is some text instructing the user to select one of the items, so I was thinking of just writing some logic to test that both lists have a selected index greater than 0.
I think this is a touch unclean though, especially considering that other pages that have a TypeFilter use the same logic.
Is there any nifty functionality in jQuery that can do this?
edit I should specify that the user needs to be able to update the page by selecting either dropdown, so I can't put the onchange on the second element and test that the first element has a selected value, as suggested in one of the answers

If you bind the same event to all dropdowns, you can get a collection of all the dropdowns and check that all of them are selected. Example:
$('.Dropdown').change(function(){
var elements = $('.Dropdown');
if (
elements.filter(function(){
return this.selectedIndex > 0;
}).length == elements.length
) {
// all dropdowns are selected
}
});

As you partly mention, put the onchange on the second element and test that the first element has a selected value before you fire off any logic.

Use bind instead, and as the eventdata, send a function that checks that either that both are selected or that the other is selected. Untested code:
function checker() {
// test your conditions
}
$(".TypeFilter").bind('change', {test: checker}, function(event)
{
if (event.data.test && event.data.test()) {
// Extract value from TypeFilter and update page accordingly
}
));
This way the other pages that use the same function will not notice any changes.