Develop Reference

Hide the first dropdown selected text from second dropdown

I need to change the based on the text, not value because values are different. So can please anyone help me.
$("#primary_supplier").change(function () {
var selectedText = $(this).find("option:selected").text();
var selectedValue = $(this).text();
var optionValues = [];
$('#secondary_supplier option').each(function () {
optionValues.push($(this).text());
});
optionValues.toString();
console.log(optionValues);
if ($.inArray(selectedText, optionValues) != '-1') {
var others = $("#secondary_supplier option[value=" + selectedText + "]");
$("#secondary_supplier option[selectedText]").css("display", "none");
$("#secondary_supplier :not(option[value=" + selectedText + "])").css("display", "block");
}
});

This may help you
$(function() {
$("#primary_supplier").change(function() {
loadSecondDropdown(this);
});
});
function loadSecondDropdown(ele){
var sele=$('option:selected', ele).text();
$("#secondary_supplier").val('default');
$('#secondary_supplier option').show();
$('#secondary_supplier option').each(function () {
if(sele==$(this).text()){
$(this).hide();
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Primary
</label>
<select id="primary_supplier" name="projectKey">
<option value="default">--select--</option>
<option value="p1">supplier 1</option>
<option value="p2">supplier 2</option>
<option value="p3">supplier 3</option>
<option value="p4">supplier 4</option>
</select>
<label>Secondary
</label>
<select id="secondary_supplier" name="projectKey">
<option value="default">--select--</option>
<option value="s1">supplier 1</option>
<option value="s2">supplier 2</option>
<option value="s3">supplier 3</option>
<option value="s4">supplier 4</option>
</select>

selector this + option is not working

I am trying that when the Change event is launched in a select with the same class as others, the value is retrieved, and if it is equal to one data then select another of the same select. My problem is in, I do not know how to create the selector. I've tried like this, but it does not work. Welcome all the answers
$(function(){
$(document).on('change','.sel',function(){
var val = parseInt( $(this).val() );
if( val === 2 ){
$(this + 'option[value="3"]').prop('selected',true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="sel">
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
</select>
<select class="sel">
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
</select>

You can use this keyword to get select element and then use find method to get desired option. You cannot use this like you did in your example. Try running this + 'option[value="3"]' in your console - it will output "[object Window]option[value=\"3\"]", which is not a selector you wanted.
$(function(){
$(document).on('change','.sel',function(){
var val = parseInt( $(this).val() );
if( val === 2 ){
$(this).find("option[value='3']").prop('selected',true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="sel">
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
</select>
<select class="sel">
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
</select>

$('.sel > option').click(function(e){
var = trueVal = "";
var selectedVal = $(e.target).attr('value');
if(selectedVal == '1'){
trueVal = '2';
} else if(selectedVal == '2'){
trueVal = '3';
}
return trueVal;
console.log(trueVal);
// Do whatever you want with trueValue
});

get the value of other DropDownList in Jquery after change the option of the first DropDownList

I select other option on one of my ddl and I succeded on getting that value,but in simultaneously I want to get option on other ddl in the code.
How can I get the other ddl option....?
I put here a code example of my issue:
<select id="someIdName" class="selectMenuFromHour" onchange="someFunc(this)">
<option value="0" selected="selected">(none)</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>
</select>
<select id="someIdName" class="selectMenuTillHour" onchange="someFunc(this)">
<option value="0" selected="selected">(none)</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>
</select>
function someFunc(obj) {
var startHour;
var endHour;
if ($(obj).attr('class') == "selectMenuFromHour") {
startHour = $(obj).val();
//*need to add the value of the class - selectMenuTillHour !
}
if ($(obj).attr('class') == "selectMenuTillHour") {
endHour = $(obj).val();
//*need to add the value of the class selectMenuFromHour!
}
}

You can try this:
$('select').change(function(){
var $this = $(this);
var startHour = 0;
var endHour = 0;
if ($this.hasClass("selectMenuFromHour")) {
$this.find('option').each(function(){
startHour += parseInt($(this).val()) || 0;
});
alert(startHour);
}
if ($this.hasClass("selectMenuTillHour")) {
$this.find('option').each(function(){
endHour += parseInt($(this).val()) || 0;
});
alert(endHour);
}
});
Here is the DEMO.

Get Values of Multiple Select Dropdowns in Group Using Jquery

I have multiple select dropdowns as such:
<select name="offer1cards[]">
<option value="1">Card 1</option>
<option value="2">Card 2</option>
<option value="3">Card 3</option>
</select>
<select name="offer1cards[]">
<option value="1">Card 1</option>
<option value="2">Card 2</option>
<option value="3">Card 3</option>
</select>
<select name="offer1cards[]">
<option value="1">Card 1</option>
<option value="2">Card 2</option>
<option value="3">Card 3</option>
</select>
I am trying to get the values into a comma separated string using jquery but I know I am not doing something right:
var values = new Array();
$.each($("input[name='offer1cards[]']:selected"), function() {
values.push($(this).val());
var items = values.split(',');
alert(items);
});
How can I get these values into a string?

You are unnecessarily using :selected and instead of split use join to join a array, Just do
var values = new Array(), var items;
$.each($("input[name='offer1cards[]']"), function() {
values.push($(this).val());
});
items = values.join(',');
alert(items);

You $.map() them and then .join() 'em.
var res = $.map($("select[name='offer1cards[]']"), function(ele) {
return $(ele).val();
}).join(', ');
alert(res);
Demo: http://jsfiddle.net/5t9ddd98/1/

How to deactivate select-option with javascript?

In the following HTML code I would like to realize the following with JavaScript. When the user selects Audi, he has only the option to select application 2 (application 1 has to disappear in this case).
<select>
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="app1">application 1</option>
<option value="app2">application 2</option>
</select>
I wrote the code here.

html:
<select>
<option id="app1" value="volvo">Volvo</option>
<option id="app2" value="audi">Audi</option>
</select>
<select>
<option value="app1">application 1</option>
<option value="app2">application 2</option>
</select>
js:
var selections = document.getElementsByTagName('select');
selections[0].onchange = carSelection;
function carSelection(e) {
var first = selections[0];
var id = first.options[first.selectedIndex].id;
var second = selections[1];
var j = 0;
while (second.options[j]) {
second.options[j].disabled = (second.options[j].value != id );
if (second.options[j].value == id)
second.selectedIndex = j;
j++;
}
}
http://jsfiddle.net/U4y2J/3/

Automatically deselect application 1 when Audi is selected.
http://jsfiddle.net/KQMLQ/1/
HTML
<select id="1">
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
</select>
<select id="2">
<option value="app1">application 1</option>
<option value="app2">application 2</option>
</select>
jQuery
$("#1").click(function() {
if($("#1").val() === 'volvo') {
$("#2").find('option[value="app1"]').removeAttr('disabled');
}
if($("#1").val() === 'audi') {
$("#2").find('option[value="app1"]').attr('disabled', 'disabled').removeAttr('selected');
$("#2").find('option[value="app2"]').removeAttr('disabled');
}
});

HTML:
<select id="1">
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
</select>
<select id="2">
<option id="2a" value="app1">application 1</option>
<option id="2b" value="app2">application 2</option>
</select>
Javascript:
<script type="text/javascript">
document.getElementById("1").onchange = change;
function change(){
var s_a = document.getElementById("1");
var car = s_a.options[s_a.selectedIndex].value;
var s_b = document.getElementById("2");
if(car === "audi"){
s_b.options["2b"].disabled = true ;
s_b.options["2a"].selected = true;
}
else {
s_b.options["2b"].disabled = false ;
}
}
</script>
And link to fiddler

Here is a jQuery version DEMO
where I remove the option when the select is audi - it is removed based on values so you can have as many options you want surrounding the option to remove
var opts=[];
$(function() {
$("#sel2 option").each(function(){ // save all options
var opt = {};
opt.value=this.value;
opt.text=this.text;
opts.push(opt);
});
$("#sel1").on("change",function() { // restore relevant options
var sel = $("#sel2");
sel.empty();
var val = $(this).val();
$.each(opts,function(i,opt) {
if (val == "audi" && opt.value=="app2") return;
sel.append('<option value="'+opt.value+'">'+opt.text+'</option>');
});
});
});