Take a value text not id value in dropdown list - javascript

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>

Related

append comma separated values to select options jQuery

I have a sting with comma separated
var str = "-1,opt1,opt2,opt3,opt4,opt5";
I want to append these values to my select dropdown, so that it should look like
<select>
<option value="-1">-Select-</option>
<option value="opt1">opt1</option>
<option value="opt2">opt2</option>
<option value="opt3">opt3</option>
<option value="opt4">opt4</option>
<option value="opt5">opt5</option>
</select>
I have tried putting the string into my select
$.each(str, function(key, value) {
$('#sel').append('<option value="'+value+'">'+key+'</option>');
});
Now this will put each string as an option value. But how do i put each opt as one option as i described above.
You can split the string and then iterate
var str = "-1,opt1,opt2,opt3,opt4,opt5";
$.each(str.split(','), function(key, value) {
$('#sel').append('<option value="' + value + '">' + (value == '-1' ? 'select' : value) + '</option>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sel">
</select>
You need to split() your string in to an array before looping through it:
var str = "-1,opt1,opt2,opt3,opt4,opt5";
$.each(str.split(','), function(key, value) {
$('#sel').append('<option value="' + value + '">' + key + '</option>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="sel"></select>
Try this,
var str = "-1,opt1,opt2,opt3,opt4,opt5";
var strArr = str.split(',');
var htmlOptions='';
$(strArr).each(function(index,value){
htmlOptions += '<option value="'+value+'">' +(value==-1 ? '--select--' : value) +'</option>';
});
$('#sel').html(htmlOptions);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sel"></select>
Use the string split method.
var str = "-1,opt1,opt2,opt3,opt4,opt5";
var optionStrings = str.split(',');
...
Try this:
var array = str.split(",");
for (i=0;i<array.length;i++){
$('#sel').append('<option value="'+array[i]+'">'+array[0]+'</option>');
}
you should try this
var array = str.split(",");
for (i=0;i<array.length;i++){
$('#sel').append('<option value="'+array[i]+'">'+array[0]+'</option>');
}

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>');
}
});

jQuery select option value

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');
});​

Browser back-button when a list of values selection

I'm trying to keep the list of values from drop-down selections when the browser back-button is click after the form has been submitted. I tried using Ben Alman's bbq jquery, but failed to get things working. Here's what I've been trying. Please help.
Many thanks in advance.
HTML
<form action="something.py" id="formName">
<table id = "tabName">
<tr>
<th>Name</th><th>Number</th>
</tr>
<tr>
<td>
<select id="myname" name="myname">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</td>
<td>
<select id="mynumber" name="mynumber">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
</table>
<input type="submit" value="submit" />
</form>
JQuery:
var selected_value = [];
$('#mynumber').change(function() {
var name = $('#myname').val();
var number = $('#mynumber').val();
$("#tabName tr:last").before("<tr><td>" + name + "</td><td>" + number + "</td></tr>");
selected_value.push(name);
});
$('#formName').submit(function() {
$.bbq.pushState({
values: selected_value
});
//return false;
});
$(window).bind("hashchange", function(e) {
var values = $.bbq.getState("url");
if (selected_value === values) {
$(this).addClass("current");
} else {
$(this).removeClass("current");
}
});
My solution (without cookies or localStorage) based on location.hash:
function addRow(name, number){
$("#tabName tr:last").before("<tr><td>" + name + "</td><td>" + number + "</td></tr>");
}
$(function(){
if(location.hash){
var rows = location.hash.substr(1).split(';');
for(var i = 0; i < rows.length; i++){
var row = rows[i].split(',');
if(row.length == 2){
addRow(row[0], row[1]);
}
}
}
$('#mynumber').change(function() {
var name = $('#myname').val();
var number = $('#mynumber').val();
location.hash = location.hash + (location.hash ? ';' : '') + name + ',' + number;
addRow(name, number);
});
});
I think it does what you have asked for - if not, please give me some feedback in comments.
$('#formName').submit(function() {
$.bbq.pushState({
values: selected_value
});
//return false;
});
should be
$('#formName').submit(function() {
$.bbq.pushState({
values: selected_value
});
//return false;
});
and
var values = $.bbq.getState("url");
should be
var values = $.bbq.getState("values");

Categories