We Keep Coding

Remove select placeholder on focus select field

<select class="name">
<option value="">Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
Remove Select Option when user click on it like input field placeholder. Also not show in drop down.

<select class="name">
<option value="" style="display:none;">Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
style="display:none;" should do the trick (Selected by default but not visible under options).

You can instated use <option value="" disabled selected>Select Option</option>

Change multiple dropdown values by selecting from a single dropdown

As the title says, Im trying to change the values on multiple dropdowns by changing a single dropdown. The multiple dropdowns need to get the same value that is selected in the "Select All" dropdown. Something very similar to a check all for checkboxes.
<select name="changeAll" id="changeAll" onchange="changeAll(this);">
<option value="select" selected="selected">Select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<select id="currency1" class="form-control">
<option selected value="option1" disabled>Option 1</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<select id="currency2" class="form-control">
<option selected value="option1" disabled>Option 1</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<select id="currency3" class="form-control">
<option selected value="option1" disabled>Option 1</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
The idea is that when a value is selected in the first dropdown "changeAll", all of the other dropdowns will have their values change to match the one selected in the "changeAll" dropdown.
Any help with this would be greatly appreciated.

Based on what you asked, I have tried to simulate. Try to run. Thnx
$('select#changeAll').on('change', function() {
var val_ = $('#changeAll :selected').text();
$('.child-changed option').map(function() {
$(this).text(val_);
$(this).value=val_;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<select name="changeAll" id="changeAll" >
<option value="ca_select" selected="selected">Select</option>
<option value="ca_option1">ca Option 1</option>
<option value="ca_option2">ca Option 2</option>
<option value="ca_option3">ca Option 3</option>
</select>
<div>
</div>
<select id="currency1" class="form-control child-changed">
<option selected value="c1_option1_selected" disabled>currency1 Option 1</option>
<option value="c1_option1">currency1 Option 1</option>
<option value="c1_option2">currency1 Option 2</option>
<option value="c1_option3">currency1 Option 3</option>
</select>
<div>
</div>
<select id="currency2" class="form-control child-changed">
<option selected value="c2_option1_selected" disabled>currency2 Option 1</option>
<option value="c2_option1">currency2 Option 1</option>
<option value="c2_option2">currency2 Option 2</option>
<option value="c2_option3">currency2 Option 3</option>
</select>
<div>

Add third list on dependent dropdown list JS

I'm trying to create a dynamic dependent drop down lists. This code below work fine with 2 dependency and I’m trying to add a third dependency. Have you got any idea ?
For exemple :
Status 1 = offer 1, offer 2, offer 3 , offer 4
Offer 1 = Option 1
Thanks for your help
UPDATE 11.15.09
Finally find a solution
$("#street").val([]);
$('#street option').hide();
$("#city").on("change", function() {
$('#street option')
.hide() // hide all
.filter('[value^="' + $(this).val() + '"]') // filter options with required value
.show(); // and show them
$("#street").val([]);
})
$("#number").val([]);
$('#number option').hide();
$("#street").on("change", function() {
$('#number option')
.hide() // hide all
.filter('[value^="' + $(this).val() + '"]') // filter options with required value
.show(); // and show them
$("#number").val([]);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
City:
<select id="city" name="city">
<option value="0">Select City</option>
<option value="1">Manchester</option>
<option value="2">Leicester</option>
<option value="3">Londra</option>
</select>
Street:
<select id="street" name="street">
<option value="1.A">Street A</option>
<option value="1.B">Street B</option>
<option value="1.C">Street C</option>
<option value="2.D">Street D</option>
<option value="2.E">Street E</option>
<option value="2.F">Street F</option>
<option value="3.G">Street G</option>
<option value="3.H">Street H</option>
</select>
Number:
<select id="number" name="number">
<option value="1.A">1</option>
<option value="1.B">2</option>
<option value="1.C">3</option>
<option value="2.D">4</option>
<option value="2.E">5</option>
</select>

I fixed the problem with javascript. (no need to use jQuery)
Please try to use updated code below.
HTML:
<div>
<select name="select1" id="select1">
<option value="1" data-sync="1">Status 1</option>
<option value="2" data-sync="2">Status 2</option>
</select>
</div>
<div>
<select name="select2" id="select2">
<option value="1">offer 1</option>
<option value="1">offer 2</option>
<option value="1">offer 3</option>
<option value="1">offer 4</option>
<option value="1">offer 5</option>
<option value="2">offer 6</option>
<option value="2">offer 7</option>
<option value="2">offer 8</option>
<option value="2">offer 9<option>
</select>
</div>
<div>
<select name="select3" id="select3">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="1">option 3</option>
<option value="2">option 4</option>
</select>
</div>
Javascript:
document.getElementById("select1").onchange=function() {
document.getElementById("select2").value=this.options[this.selectedIndex].getAttribute("data-sync");
document.getElementById("select3").value=this.options[this.selectedIndex].getAttribute("data-sync");
}
document.getElementById("select1").onchange();
Check the running code link below.
http://jsfiddle.net/f97u5nLa/33/

Enable Sequential Select Menus when you don't know the IDs

I have a set of Select Menus that are built from the variants in a product database (WooCommerce). There can be any number of them, usually from 3 to 8. Something simple like:
<select id="*Could be Anything*" name="*Could be Anything*">
<option>Choose an option...</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
</select>
<select id="*Could be Anything*" name="*Could be Anything*" disabled="true">
<option>Choose an option...</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
</select>
<select id="*Could be Anything*" name="*Could be Anything*" disabled="true">
<option>Choose an option...</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
</select>
I want to enable them sequentially based on a selection being made in the previous menu. I don't need to change any options in the new menu - I just need to enable it.
So, if Select1 ≠ "Choose an option..." then enable Select2 and if Select2 ≠ "Choose an option..." then enable Select3.
The problem is I can't predict what the IDs are going to be, so I can't use a variant of:
$(function() {
$("#theID").change(function() {
if ($(this).val() == "Choose an option…") {
$("#theID_2").prop("disabled", true);
}
else
$("#theID_2").prop("disabled", false);
});
});
My question then: is there a way to sequence the enabling/disabling of Select menus using jQuery alone without knowing the ids in advance?
Is this just a crazy idea? Would I be better to try to build the javascript on the fly, reading the ids are they're written into the Selects server-side?

If the selects are in a sequential order to each other, you might be able to use JQuery.next():
http://api.jquery.com/next/
$("select").on('change', function(){
$(this).next("select").prop("disabled", false);
});
Example:
http://jsfiddle.net/Zv72Y/

If all these selects in one containers, then you can attach an event listener to each, which will unlock next select element:
HTML:
<div class='container'>
<select id="*Could be Anything*" name="*Could be Anything*">
<option>Choose an option...</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
</select>
<select id="*Could be Anything*" name="*Could be Anything*" disabled="true">
<option>Choose an option...</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
</select>
<select id="*Could be Anything*" name="*Could be Anything*" disabled="true">
<option>Choose an option...</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
</select>
</div>
Javascipt:
$('.container').on('change','select', function(){
$(this).nextAll('select').first().removeAttr('disabled');
});
$().nextAll() - Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.
.first() will select first select after current and remove from him attritbute disabled.
Example: jsFiddle

jQuery Setting an option on a select box

I can't seem to get this to work...
<select id="selectBox">
<option value="A">Number 0</option>
<option value="B">Number 1</option>
<option value="C">Number 2</option>
<option value="D">Number 3</option>
<option value="E">Number 4</option>
<option value="F">Number 5</option>
<option value="G">Number 6</option>
<option value="H">Number 7</option>
</select>
$('#selectBox option[value=C]').attr('selected', 'selected');

Unless you are trying to do a multi-select list box, why not:
$('#selectBox').val('C');