jQuery select option value - javascript

How do you set the "city" value to the same thing as country value when there is no option for a city?
For example, Benin doesn't have an option to select a city inside of it. At this link http://jsfiddle.net/yPb6N/1/, if you select "Benin", underneath the dropdown it displays Benin undefined. How do you make it display Benin Benin?
<select id="country-select">
<option value="us">US</option>
<option value="germany">Germany</option>
<option>Ireland</option>
<option>Benin</option>
<option>Italy</option>
</select>
<select id="us-select" class="sub-menu hide">
<option value="austin">Austin</option>
</select>
<select id="germany-select" class="sub-menu hide">
<option value="berlin">Berlin</option>
</select>
<p></p>
<font size="5"><font color="red"><div class="countryvalue" >Value</div></font></font> <br/>
​
function countrySelectChanged() {
$('.sub-menu').hide();
var selectedCountry = $('#country-select').val();
if (selectedCountry) {
$('#' + selectedCountry + '-select').show();
}
}
$(document).ready(function() {
$('#country-select').change(countrySelectChanged );
countrySelectChanged();
$("#country-select").change(function () {
var str = $('#country-select').val() + " " + $("#" + $("#country-select option:selected").val() + "-select option:selected").val();
$("#country-select option:selected").each(function () {
});
$(".countryvalue").text(str);
})
.change();
});
​
.hide {
display: none;
}​
My code is not working
if (($('#country-select').val() != "us") || ($('#country-select').val() != "germany")) {
$("#" + $("#country-select option:selected").val() + "-select option:selected").val() == $('#country-select').val();
}
thanks :-)

This line:
var str = $('#country-select').val() + " " + $("#" + $("#country-select option:selected").val() + "-select option:selected").val();
Needs to be somthing like:
var country = $('#country-select option:selected').val();
var city = $("#" + country + "-select option:selected").val() || country;
$(".countryvalue").text(country + " " +city);
This way, if the name of the city doesn't exist, it will use the name of the country. Also, it doesn't perform multiple selectors for the same element, which is wasteful.
Here is the updated fiddle.

I guess that you want to print only the country name if there is no city associated with this country. If so, I have created this fiddle : http://jsfiddle.net/scaillerie/tSgVL/1/ .
In fact, you have to test if the list associated with your country exists or not :
hasCity = $("#" + $("#country-select option:selected").val() + "-select").length !== 0
and then print or not the country.
Edit
It seems that you want to duplicate the country, so depending of the previous test, you will have :
str = $country.val() + " " + (hasCity ? $("#" + country_val + "-select option:selected").val() : $country.val());

basically what #Aesthete said, i just refactored the whole function (took some minutes), maybe you like it (i updated the fiddle: http://jsfiddle.net/yPb6N/4/):
$(document).ready(function() {
var country
, city
, $selected
, $cs = $('#country-select')
, $cv = $(".countryvalue");
$cs.on('change', function() {
country = $cs.val() || $cs.text();
$selected = $cs.find(':selected');
city = $selected.val() || $selected.text();
$('.sub-menu').addClass('hide');
if($selected.val()) {
$('#' + $selected.val() + '-select').removeClass('hide');
city = $('#' + $selected.val() + '-select').val() || country;
}
$cv.text(country + ' ' + city);
});
$cs.trigger('change');
});​

Related

Take a value text not id value in dropdown list

I have a dropdownlist
<option value="13">MATT</option>
<option value="15">MeT</option>
I would like to take the text instead id value from a dropdownlist:
what's wrong with this line??
if ($("select[title='" + tipologiaSelector + '"] ("option: selected")').text() == "MATT")
thank you
You can get value of option by text by spread operator and find as
var res = [...document.getElementsByTagName("option")].find(c=>c.innerText == "MATT").value;
If you want to use jquery, use each function as
$("#test option").each(function(index, item){
if( $(item).text() == "MATT") {
id = $(item).attr("value");
return;
}
})
var res = [...document.getElementsByTagName("option")].find(c=>c.innerText == "MATT").value;
console.log(res)
var id;
$("#test option").each(function(index, item){
if( $(item).text() == "MATT") {
id = $(item).attr("value");
return;
}
})
console.log(id)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="test">
<option value="13">MATT</option>
<option value="15">MeT</option>
</select>
Your selector has the wrong syntax. unmatched quotes: title='" and spacing after : and no need for paranthesis and quotes around the option:selected.
tipologiaSelector = "mytitle";
if ($("select[title=\"" + tipologiaSelector + '"] option:selected').text() == "MATT") console.log("== MATT");
$('select').change( function(){
if ($("select[title=\"" + tipologiaSelector + '"] option:selected').text() == "MATT") console.log("== MATT");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select title="mytitle">
<option value="13">MATT</option>
<option value="15">MeT</option>
</select>

If form multiple selects value are euals zero

I have multiple forms with one, two, three html select. I just want simple code if form select selected value equals to zero then console.log "please select order". Following is the script which I am working on.
$('form').submit(function(event){
event.preventDefault();
var dataitem = $(this).attr('data-item');
if (dataitem == 1) {
console.log(dataitem);
var $myform = $(this),
flavour1 = $myform.find( "select[name='flavour1']" ).val(),
drink = $myform.find( "select[name='drink']" ).val();
console.log("Flavour :" + flavour1 + ", Drink :" + drink);
} else if (dataitem == 2) {
console.log(dataitem);
var $myform = $(this),
flavour1 = $myform.find( "select[name='flavour1']" ).val(),
flavour2 = $myform.find( "select[name='flavour2']" ).val(),
drink = $myform.find( "select[name='drink']" ).val();
console.log("Flavour1 :" + flavour1 + ", Flavour2 :" + flavour2 + ", Drink :" + drink);
} else {
console.log(dataitem);
var $myform = $(this),
flavour1 = $myform.find( "select[name='flavour1']" ).val(),
flavour2 = $myform.find( "select[name='flavour2']" ).val(),
flavour3 = $myform.find( "select[name='flavour3']" ).val(),
drink = $myform.find( "select[name='drink']" ).val();
console.log("Flavour1 :" + flavour1 + ", Flavour2 :" + flavour2 + ", Flavour3 :" + flavour3 + ", Drink :" + drink);
}
});
please advice as i am stuck at this point of selection. If each select value == 0.
Thanks
Usualy if you have multiple components similar you can use:
$myform.find("select")
This will give you all "select" elements in your form. And then you can find the value one by one using:
$myform.find("select").each(function(index, value){
var valSelec = $(this).val();
///Make your if
})
I create a function: validateSelect() that search on all selects of form and verify if the option selected was empty, if true they return false.
Example:
$("form").submit(function(e) {
e.preventDefault();
if (validateSelect()) {
console.log('All are filled valid');
} else {
console.log('Invalid');
}
});
function validateSelect() {
var fleg = true;
$.each($('select option:selected'), function(key, val) {
if (val.value.length < 1) {
fleg = false;
}
});
return fleg;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form>
<select name="number">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="letter">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<input type="submit">
</form>

How to append value " select " to the Select dropdown?

I want add "All" option to the existing dropdown as a first option. Pls help me
if(own != null)
{
var ar = own.replace("[","").replace("]","").split(",");
var output = $("#status_type");
output.empty();
for(var i=0;i<ar.length/2;i++)
{
output.append("<option value='" + $.trim(ar[i*2+1]) + "'>" + $.trim(ar[i*2+1]) + "</option>");
//alert ("val " +$.trim(ar[i*2+1]));
}
}
I want "All" to be the first option in select dropdown
Instead of empty() use .html() and pass the html of the All Option. This will clear the select first then will add all option and then will add other options, and will save you an unnecessary .empty() operation.
if(own != null)
{
var ar = own.replace("[","").replace("]","").split(",");
var output = $("#status_type");
output.html('<option value="'+all+'">All</option>');
for(var i=0;i<ar.length/2;i++)
{
output.append("<option value='" + $.trim(ar[i*2+1]) + "'>" + $.trim(ar[i*2+1]) + "</option>");
//alert ("val " +$.trim(ar[i*2+1]));
}
Try this: You can add ALL option just right after emptying the output variable as shown below -
if(own != null)
{
var ar = own.replace("[","").replace("]","").split(",");
var output = $("#status_type");
output.empty();
output.append("<option value='ALL'></option");//add here
for(var i=0;i<ar.length/2;i++)
{
output.append("<option value='" + $.trim(ar[i*2+1]) + "'>" + $.trim(ar[i*2+1]) + "</option>");
//alert ("val " +$.trim(ar[i*2+1]));
}
}
Try this:
$('#mysampledropdown').empty();
$.each(response.d, function(key, value) {
$("#mysampledropdown").append($("<option></option>").val(value.ID).html(value.text));
});
$('<option>').val("").text('--ALL--').prependTo('#mysampledropdown');

How to update the div text based on dropdown value?

I have 4 dropdowns, 2 for the "From" destination and 2 for the "To" destination.
What I want to do is to update the #from div and the #to div based on the dropdown values.
For example on the "From" destination, if 1 and 5 is selected then the #from must show 1 -> 5
That means that while selecting the 1, it will show 1 -> until the user selects from the 2nd dropdown and it completes the sequence.
from
<select id="from_country">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="from_city">
<option value="1">4</option>
<option value="2">5</option>
<option value="3">6</option>
</select>
<br>
<br />
to
<select id="to_country">
<option value="1">7</option>
<option value="2">8</option>
<option value="3">9</option>
</select>
<select id="to_city">
<option value="1">10</option>
<option value="2">11</option>
<option value="3">12</option>
</select>
<div id="from"></div>
<div id="to"></div>
$('#from_country').change(function () {
var country = $('option:selected', this).val();
var city = $('#from_city').val();
$('#from').text(country + "->" + city);
})
$('#from_city').change(function () {
var city = $('option:selected', this).val();
var country = $('#from_country').val();
$('#from').text(country + "->" + city);
})
$('#to_country').change(function () {
var country = $('option:selected', this).val();
var city = $('#to_city').val();
console.log(country + "->" + city)
$('#to').text(country + "->" + city);
})
$('#to_city').change(function () {
var city = $('option:selected', this).val();
var country = $('#to_country').val();
$('#to').text(country + "->" + city);
})
Try this
demo
Here is a simple solution: http://jsbin.com/huvilegeso/edit?html,js,output. I only did it for the From section. The To section is very similar.
var from = [null, '->'];
$('#from_country').on('change', function() {
from[0] = $(this).val();
renderFrom(from);
});
$('#from_city').on('change', function() {
from[2] = $(this).val();
renderFrom(from);
});
function renderFrom(from) {
$('#from').html(from.join(' '));
}
You can do something like this.
$('#from_country').change(function () {
$('#from').text( $('#from_country :selected').text() + '->' +
$('#from_city :selected').text());
});
$('#from_city').change(function () {
$('#from').text( $('#from_country :selected').text() + '->' +
$('#from_city :selected').text());
});
$('#to_country').change(function () {
$('#to').text( $('#to_country :selected').text() + '->' +
$('#to_city :selected').text());
});
$('#to_city').change(function () {
$('#to').text( $('#to_country :selected').text() + '->' +
$('#to_city :selected').text());
});

matching text of option tag using filter function

I have two select box. on change event of first select box, i'm adding that text into second select box. but i don't want to add duplicate record.for this i'm using filter function,(if any text that has already added then i don't want to add again) but it's not working as i want.
html
<select id="ddlCategory">
<option value="0">Select Category</option>
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
</select>
<select multiple="multiple" id="my-select" name="my-select[]" class="multiDrop"> </select>
<select multiple="multiple" id="your-select" name="my-selectyour[]" class="multiDrop">
myJs:
$('#my-select').change(function () {
var getValue = $(this).find('option:selected').val();
var getText = $(this).find('option:selected').text();
var getCategory = $('#ddlCategory').find('option:selected').text();
if ($('#your-select > option').hasClass(getCategory)) {
$("#your-select > option").filter(function (index) {
if ($(this).html() == getText) {
return;
}
$('#your-select').append('<option value="' + getValue + '" class="' + getCategory + '">' + getText + '</option>');
});
} else {
$('#your-select').html('<option value="' + getValue + '" class="' + getCategory + '">' + getText + '</option>');
}
});
Jsfiddle
Here you go... my edited fiddle: http://jsfiddle.net/stoz1m6v/2/
This way it does not duplicate the entries in myselect...
you had some checking of class/category there which I removed, because I found it incorrectly done, however I could not comprehend how exactly you wanted to check the category...
and the script goes like this... I have changed only the change handler of the my-select:
$('#my-select').change(function () {
var getValue = $(this).find('option:selected').val();
var getText = $(this).find('option:selected').text();
var getCategory = $('#ddlCategory').find('option:selected').text();
if ($("#your-select > option").filter(function (index) {
return $(this).html() == getText; }).length ==0) {
$('#your-select').append('<option value="' + getValue + '" class="' + getCategory + '">' + getText + '</option>');
}
});

Categories