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>
Related
So this is the HTML code:
<select id='selUser' style='width: 200px;'>
<option value='0'>Select User</option>
<option value='1'>Yogesh singh</option>
<option value='2'>Sonarika Bhadoria</option>
<option value='3'>Anil Singh</option>
<option value='4'>Vishal Sahu</option>
<option value='5'>Mayank Patidar</option>
<option value='6'>Vijay Mourya</option>
<option value='7'>Rakesh sahu</option>
</select>
What I want to achieve is that, when I click on Value '1', the dropdownlist will display "1" instead of Yogesh Singh. Is it possible to do that?
This will display the value instead of the name when you select an option. I also wrote some code to put the name back if you change it again otherwise the number would just stay there added both examples:
var oldIndex = ''
var oldText = ''
function change(x) {
if (oldIndex != '' && oldText != '') {
x.options[oldIndex].innerHTML = oldText
}
oldIndex = x.value
oldText = x.options[x.selectedIndex].innerHTML
x.options[x.selectedIndex].innerHTML = x.value
}
function change2(x) {
x.options[x.selectedIndex].innerHTML = x.value
}
<select onchange="change(this)" id='selUser' style='width: 200px;'>
<option value='0'>Select User</option>
<option value='1'>Yogesh singh</option>
<option value='2'>Sonarika Bhadoria</option>
<option value='3'>Anil Singh</option>
<option value='4'>Vishal Sahu</option>
<option value='5'>Mayank Patidar</option>
<option value='6'>Vijay Mourya</option>
<option value='7'>Rakesh sahu</option>
</select>
<select onchange="change2(this)" id='selUser2' style='width: 200px;'>
<option value='0'>Select User</option>
<option value='1'>Yogesh singh</option>
<option value='2'>Sonarika Bhadoria</option>
<option value='3'>Anil Singh</option>
<option value='4'>Vishal Sahu</option>
<option value='5'>Mayank Patidar</option>
<option value='6'>Vijay Mourya</option>
<option value='7'>Rakesh sahu</option>
</select>
This script would do it:
document.body.onload = function(){
sel = document.getElementById('selUser');
opts = sel.childNodes;
for(var i in opts){
opts[i].innerHTML = opts[i].value;
}
}
Solution using jQuery:
var last_user_selected_name;
$(document).on('change', '#selUser', function() {
$('#selUser option:not(:selected)').each(function() {
if ($(this).text() === $(this).val()) {
$(this).text(last_user_selected_name);
}
});
var user_seleted = $('#selUser option:selected');
if (user_seleted.val() != 0) {
last_user_selected_name = user_seleted.text();
user_seleted.text(user_seleted.val());
console.log("User selected >> " + last_user_selected_name +
" >> " + user_seleted.val());
}
});
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<select id='selUser' style='width: 200px;'>
<option value='0'>Select User</option>
<option value='1'>Yogesh singh</option>
<option value='2'>Sonarika Bhadoria</option>
<option value='3'>Anil Singh</option>
<option value='4'>Vishal Sahu</option>
<option value='5'>Mayank Patidar</option>
<option value='6'>Vijay Mourya</option>
<option value='7'>Rakesh sahu</option>
</select>
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
});
The options in my "States" drop-down menu are all being hidden
I'm trying to filter based on the value of the Country drop-down which is selected.
$('#Content_C003_Country').change(function() {
const filter = $(this).val();
//console.log(filter);
$("#Content_C003_State option").each(function() {
($("option[value^='" + filter + "']") != -1) ? $(this).hide(): $(this).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select id="Content_C003_Country" class="searchFieldDrop">
<option value="36">Canada</option>
<option value="222">United States</option>
</select>
<select id="Content_C003_State" class="searchFieldDrop">
<option value="36-AB">Alberta</option>
<option value="36-BC">British Columbia</option>
<option value="36-MB">Manitoba</option>
<option value="222-AZ">Arizona</option>
<option value="222-AR">Arkansas</option>
<option value="222-CA">California</option>
</select>
(function($){
var $country = $('#Content_C003_Country');
var $state = $('#Content_C003_State');
var $stateOptions = $state.children();
$country.on('change', function(){
//remove the options
$stateOptions.detach();
//readd only the options for the country
$stateOptions.filter(function(){
return this.value.indexOf($country.val() + "-") === 0;
}).appendTo($state);
//clear out the value so it doesn't default to one it should not
$state.val('');
});
}(jQuery));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Content_C003_Country" class="searchFieldDrop">
<option value="36">Canada</option>
<option value="222">United States</option>
</select>
<select id="Content_C003_State" class="searchFieldDrop">
<option value="36-AB">Alberta</option>
<option value="36-BC">British Columbia</option>
<option value="36-MB">Manitoba</option>
<option value="222-AZ">Arizona</option>
<option value="222-AR">Arkansas</option>
<option value="222-CA">California</option>
</select>
That could be achieved simply like :
$('#Content_C003_Country').change(function() {
//Hide all options
$("#Content_C003_State option").hide();
//Show the filtred ones
$("#Content_C003_State option[value^='" + $(this).val() + "']").show();
});
Or also using one line like :
$("#Content_C003_State option").hide().end().find('[value^='+$(this).val()+']').show();
Code:
$('#Content_C003_Country').change(function() {
$("#Content_C003_State option").hide();
$("#Content_C003_State option[value^='" + $(this).val() + "']").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select id="Content_C003_Country" class="searchFieldDrop">
<option value="36">Canada</option>
<option value="222">United States</option>
</select>
<select id="Content_C003_State" class="searchFieldDrop">
<option value="36-AB">Alberta</option>
<option value="36-BC">British Columbia</option>
<option value="36-MB">Manitoba</option>
<option value="222-AZ">Arizona</option>
<option value="222-AR">Arkansas</option>
<option value="222-CA">California</option>
</select>
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.
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>');
});
});
});