I'm using a select field on my site which reloads the page and then adds this to value to a separate div. I want to be able to disable this option if any of the divs have the same value as the option.
<select id="bayname" name="bayname">
<option value="">--Select Bay--</option>
<option value="1">Bay 1</option>
<option value="2">Bay 2</option>
<option value="3">Bay 3</option>
<option value="4">Bay 4</option>
<option value="5">Bay 5</option>
<option value="6">Bay 6</option>
<option value="7">Bay 7</option>
<option value="8">Bay 8</option>
<option value="9">Bay 9</option>
<option value="10">Bay 10</option>
<option value="11">Bay 11</option>
<option value="12">Bay 12</option>
<option value="13">Bay 13</option>
<option value="14">Bay 14</option>
<option value="15">Bay 15</option>
<option value="16">Bay 16</option>
<option value="17">Bay 17</option>
<option value="18">Bay 18</option>
<option value="19">Bay 19</option>
<option value="20">Bay 20</option>
<option value="21">Bay 21</option>
<option value="22">Bay 22</option>
<option value="23">Bay 23</option>
<option value="24">Bay 24</option>
<option value="25">Bay 25</option>
<option value="26">Bay 26</option>
<option value="27">Bay 27</option>
<option value="28">Bay 28</option>
<option value="29">Bay 29</option>
<option value="30">Bay 30</option>
</select>
For example if a user clicks on 'Bay 1' a div will be created like this:
<li id="1509013949" class="cart-select cart-mode-cart">
1
</li>
And then when the page reloads again, i want to create an if statement so if the value from the select is within one of the divs then it should add it as disabled.
I've had ago at doing this using the code below and i can't get it to print out in the console log.
var baynumberoption = $("#bayname option").val();
var baynumber = $(".cart-select a[href='#select']").text();
if (baynumber.indexOf(baynumberoption) >= 0) {
console.log("match found");
}
$("#bayname option") returns all of the options so I think you really want to use the following. Note if you don't want to rely on the inner text of the link, you can also add data attribute like data-id="1" to store the value which can be used like:
$("#bayname option").each(function() {
var val = $(this).val();
if ( $(".cart-select a[data-id=" + val + "]").length > 0 ) {
$(this).attr("disabled", "disabled");
}
});
Some of the syntax may be off but you get the idea.
Related
I know this is a simple question. But I couldn't find a way to overcome this issue. All I want is this. I have a drop-down created using select element & when user selecting a city from that drop-down it should be able to pass that selected value to console ( console.log() ). But I am able to pass very first selected value only. I found a way to pass values to console using onChange() with select element as following code.
HTML
<select id="comboA" onchange="getComboA(this)">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
JS
function getComboA(selectObject) {
var value = selectObject.value;
console.log(value);
}
But in my case, the whole procedure needs to be code without using onChange() in HTML. Because I have to get user inputs from WordPress form and need to make separate JS file from the form. So, I can't add or change HTML code of the form. My code is below.
HTML code
<select name="city" class="city" id="city-selection">
<option selected="selected" value="">Select City</option>
<option value="City 1">City 1</option>
<option value="City 2">City 2</option>
<option value="City 3">City 3</option>
<option value="City 4">City 4</option>
<option value="City 5">City 5</option>
<option value="City 6">City 6</option>
<option value="City 7">City 7</option>
</select>
The JS code I used is below.
JS code
var cityVal = document.getElementById("city-selection");
var cityCon = cityVal.options[cityVal.selectedIndex].text;
console.log(cityCon);
Please help me with this issue.
const selectElement = document.querySelector('#city-selection');
const changeHandler = (ev) => {
console.log('Change!', ev.target.value);
}
selectElement.addEventListener('change', changeHandler);
<select name="city" class="city" id="city-selection">
<option selected="selected" value="">Select City</option>
<option value="City 1">City 1</option>
<option value="City 2">City 2</option>
<option value="City 3">City 3</option>
<option value="City 4">City 4</option>
<option value="City 5">City 5</option>
<option value="City 6">City 6</option>
<option value="City 7">City 7</option>
</select>
Please take a look on this fiddle:
Fiddle
const selectCites = document.getElementById("city-selection");
selectCites.addEventListener("change", function(e) {
e.preventDefault();
const { srcElement } = e;
const { selectedOptions } = srcElement;
for (let i = 0; i < selectedOptions.length; i++) {
console.log(selectedOptions[i].value);
console.log(selectedOptions[i].text);
}
})
Basically I added a event listener on the select and wait for any changes and then I loop through the selectedOptions in a case you have more than one.
Just add the EventListener to listen for a change-event:
document.addEventListener("change", function() {
var cityVal = document.getElementById("city-selection");
var cityCon = cityVal.options[cityVal.selectedIndex].text;
console.log(cityCon);
}
You can register an external event listener to respond to the change event like this:
document.querySelector('select[name="city"]').addEventListener('change',function(e){
console.log( 'value: %s - Text: %s',this.value, this.options[ this.options.selectedIndex ].text )
});
<select name="city" class="city" id="city-selection">
<option selected="selected" value="">Select City</option>
<option value="City 1">City 1</option>
<option value="City 2">City 2</option>
<option value="City 3">City 3</option>
<option value="City 4">City 4</option>
<option value="City 5">City 5</option>
<option value="City 6">City 6</option>
<option value="City 7">City 7</option>
</select>
you cant use target property. like this :
const myCombo = document.getELementByID("myCombo");
myCombo.addEventListener("change" , (e) => {
console.log(e.target.value)
});
Almost all the best alternatives has been given, you can either use pure javascript or jquery
Say this is your HTML codes for Cities in Tanzania:
<select name="city" class="city" id="city-selection">
<option selected="selected" value="">Select City</option>
<option value="dar">Dar es Salaam </option>
<option value="mbeya">Mbeya</option>
<option value="mwanza">Mwanza</option>
<option value="dodoma">Dodoma</option>
<option value="arusha">Arusha</option>
<option value="morogoro">Morogoro</option>
<option value="tanga">Tanga</option>
<option value="zanzibar">Zanzibar City</option>
<option value="kigoma">Kigoma</option>
</select>
So your pure javascript can be:
document.getElementById('city-selection').addEventListener('change', function() {
let selectedCity = this.value;
console.log(selectedCity);
});
Jquery:
$('#city-selection').on('change', function() {
let selectedCity = $(this).val();
//let selectedCity = this.value; this will also do the same
//as the above declaration format
console.log(selectedCity);
});
I hope this can be of help to you
I am trying to set a next and before button to act as an option switcher. When I click on the Next button twice I can no longer get the previous button to work and vice versa.
This is for switching the sources of my video according to the next and previous button clicking as well as selecting from the options list.
$(document).ready(function(){
$('video').attr('src',$("#test").val());
$("#test").change(function(){
$('video').attr('src',$(this).val());
});
});
$("#fieldPrev").click(function() {
$('#test option:selected').prev().attr('deselected','selected');
$('video').attr('src',$("#test").val());
$("#test").change(function(){
$('video').attr('src',$(this).val());
});
});
$('#fieldNext').click(function() {
$('#test option:selected').next().attr('selected','selected');
$('video').attr('src',$("#test").val());
$("#test").change(function(){
$('video').attr('src',$(this).val());
});
});
Expected that when I click the previous the previous option will display.
<div id="epBtn" style="display:none;">
<button id="fieldPrev">❮</button>
<button id="fieldNext">❯</button>
<select id="test">
<option value="">-- Select Episode --</option>
<option value="Season 1/ep1.mp4">EP 1</option>
<option value="Season 1/ep2.mp4">EP 2</option>
<option value="Season 1/ep3.mp4">EP 3</option>
<option value="Season 1/ep4.mp4">EP 4</option>
<option value="Season 1/ep5.mp4">EP 5</option>
<option value="Season 1/ep6.mp4">EP 6</option>
<option value="Season 1/ep7.mp4">EP 7</option>
<option value="Season 1/ep8.mp4">EP 8</option>
<option value="Season 1/ep9.mp4">EP 9</option>
<option value="Season 1/ep10.mp4">EP 10</option>
<option value="Season 1/ep11.mp4">EP 11</option>
<option value="Season 1/ep12.mp4">EP 12</option>
</select>
I am using PHP to show years between 1940 and the current year and using a foreach loop to render each option inside a select element. Everything works as planned until I add an id to the select element that a block of jquery looks at for changes.
Essentially I am trying to console.log (for now) the value of whatever option gets selected but something about my jQuery/PHP is stopping the select from displaying the selected option. The console.log works as expected but the selected option doesn't update in the element. It always goes back to displaying the default option aka 2018 since it's the current year.
If I change the PHP foreach select/option to a static dropdown of plain HTML it works fine. Likewise, if I disconnect the jQuery but keep the PHP dynamically generated option list it works fine. Something about the combo of my PHP+jQuery is preventing the select from updating and I cannot figure what.
Here is my HTML/PHP code:
<select name="birthyear" id="birthyear">
<?php
// $years is setting the range from current year to 1940
$years = range(date('Y'), 1940);
foreach ($years as $year) {
echo "<option id='$year' value='$year'>".$year."</option>";
}
?>
</select>
Here is my jQuery:
$('#birthyear').on('change', function() {
var date = new Date();
var year = date.getFullYear();
var yearsOld = year - $(this).val();
console.log(yearsOld + " years old.");
if (yearsOld >= 18) {
console.log("age >= 18")
} else {
console.log("You aren't old enough!");
}
});
Am I missing something here?
Your code works fine... All I did was execute the PHP to get the HTML and then plugged it into JSFiddle.
I'd assume your problem is that you didn't properly include jQuery.
<select name="birthyear" id="birthyear">
<option id='2018' value='2018'>2018</option>
<option id='2017' value='2017'>2017</option>
<option id='2016' value='2016'>2016</option>
<option id='2015' value='2015'>2015</option>
<option id='2014' value='2014'>2014</option>
<option id='2013' value='2013'>2013</option>
<option id='2012' value='2012'>2012</option>
<option id='2011' value='2011'>2011</option>
<option id='2010' value='2010'>2010</option>
<option id='2009' value='2009'>2009</option>
<option id='2008' value='2008'>2008</option>
<option id='2007' value='2007'>2007</option>
<option id='2006' value='2006'>2006</option>
<option id='2005' value='2005'>2005</option>
<option id='2004' value='2004'>2004</option>
<option id='2003' value='2003'>2003</option>
<option id='2002' value='2002'>2002</option>
<option id='2001' value='2001'>2001</option>
<option id='2000' value='2000'>2000</option>
<option id='1999' value='1999'>1999</option>
<option id='1998' value='1998'>1998</option>
<option id='1997' value='1997'>1997</option>
<option id='1996' value='1996'>1996</option>
<option id='1995' value='1995'>1995</option>
<option id='1994' value='1994'>1994</option>
<option id='1993' value='1993'>1993</option>
<option id='1992' value='1992'>1992</option>
<option id='1991' value='1991'>1991</option>
<option id='1990' value='1990'>1990</option>
<option id='1989' value='1989'>1989</option>
<option id='1988' value='1988'>1988</option>
<option id='1987' value='1987'>1987</option>
<option id='1986' value='1986'>1986</option>
<option id='1985' value='1985'>1985</option>
<option id='1984' value='1984'>1984</option>
<option id='1983' value='1983'>1983</option>
<option id='1982' value='1982'>1982</option>
<option id='1981' value='1981'>1981</option>
<option id='1980' value='1980'>1980</option>
<option id='1979' value='1979'>1979</option>
<option id='1978' value='1978'>1978</option>
<option id='1977' value='1977'>1977</option>
<option id='1976' value='1976'>1976</option>
<option id='1975' value='1975'>1975</option>
<option id='1974' value='1974'>1974</option>
<option id='1973' value='1973'>1973</option>
<option id='1972' value='1972'>1972</option>
<option id='1971' value='1971'>1971</option>
<option id='1970' value='1970'>1970</option>
<option id='1969' value='1969'>1969</option>
<option id='1968' value='1968'>1968</option>
<option id='1967' value='1967'>1967</option>
<option id='1966' value='1966'>1966</option>
<option id='1965' value='1965'>1965</option>
<option id='1964' value='1964'>1964</option>
<option id='1963' value='1963'>1963</option>
<option id='1962' value='1962'>1962</option>
<option id='1961' value='1961'>1961</option>
<option id='1960' value='1960'>1960</option>
<option id='1959' value='1959'>1959</option>
<option id='1958' value='1958'>1958</option>
<option id='1957' value='1957'>1957</option>
<option id='1956' value='1956'>1956</option>
<option id='1955' value='1955'>1955</option>
<option id='1954' value='1954'>1954</option>
<option id='1953' value='1953'>1953</option>
<option id='1952' value='1952'>1952</option>
<option id='1951' value='1951'>1951</option>
<option id='1950' value='1950'>1950</option>
<option id='1949' value='1949'>1949</option>
<option id='1948' value='1948'>1948</option>
<option id='1947' value='1947'>1947</option>
<option id='1946' value='1946'>1946</option>
<option id='1945' value='1945'>1945</option>
<option id='1944' value='1944'>1944</option>
<option id='1943' value='1943'>1943</option>
<option id='1942' value='1942'>1942</option>
<option id='1941' value='1941'>1941</option>
<option id='1940' value='1940'>1940</option>
</select>
https://jsfiddle.net/gpfh150g/
I have a list of countries like this:
The list is very extensive. I need to be able on a button click to move (focus) to the specified country.
There are many threads in StackOverflow but none of them worked. For example I tried this:
var code = 40;
$('#id_resource-regions').val(code).scrollTop(160);
There is no response and no error/warnings in the developers tool.
Note that the list is created using django forms and templates.
Select the option element you are looking for.
Get the offset top position using .offset(), of the selected option element.
Get the offset top of the select element.
Use .scrollTop() to scroll to the desired option.
Here is an example
var btn = $('button')
var select = $('select')
btn.on('click', function() {
var option = select.find("option:contains('item-30')");
var optionTop = option.offset().top
var selectTop = select.offset().top;
select.scrollTop(select.scrollTop() + (optionTop - selectTop));
option.prop('selected', true)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="select" multiple="multiple">
<option value="">item-1</option>
<option value="">item-2</option>
<option value="">item-3</option>
<option value="">item-4</option>
<option value="">item-5</option>
<option value="">item-6</option>
<option value="">item-7</option>
<option value="">item-8</option>
<option value="">item-9</option>
<option value="">item-10</option>
<option value="">item-11</option>
<option value="">item-12</option>
<option value="">item-13</option>
<option value="">item-14</option>
<option value="">item-15</option>
<option value="">item-16</option>
<option value="">item-17</option>
<option value="">item-18</option>
<option value="">item-19</option>
<option value="">item-20</option>
<option value="">item-21</option>
<option value="">item-22</option>
<option value="">item-23</option>
<option value="">item-24</option>
<option value="">item-25</option>
<option value="">item-26</option>
<option value="">item-27</option>
<option value="">item-28</option>
<option value="">item-29</option>
<option value="">item-30</option>
<option value="">item-31</option>
<option value="">item-32</option>
<option value="">item-33</option>
<option value="">item-34</option>
<option value="">item-35</option>
<option value="">item-36</option>
<option value="">item-37</option>
<option value="">item-38</option>
<option value="">item-39</option>
<option value="">item-40</option>
</select>
<button>move to item 30</button>
I have a select tag and I want to check if a moth is selected.
<select name="Birth_Month">
<option value="" SELECTED>- Month -</option>
<option value="January">January</option>
<option value="Fabruary">Fabruary</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
So do this:
if (document.registration_form.Birth_Month.value === '')
{
alert('Please fill select Month!');
}
But this JavaScript for some select-s work and for some of them, does not. Obviously, when the "- Month -" is selected the it returnes "- Month -" insted of "" (empty string). What I have done wrong? What is the best way of checking the tag's selection?
Browsers didn't always have a .value property for <select> - we used to have to get the value of the <option>:
var birthMonth = document.registration_form.Birth_Month;
if (birthMonth.options[birthMonth.selectedIndex].value === '') {
// something
}
I use jQuery .val() now. I don't remember which browsers lack the select.value property, and maybe those browsers are so old that we don't need to worry about them anymore. But jQuery doesn't use select.value - it loops through each of the options to find the selected option's value.
Of course, if you know you'll always have a single blank option as the first option, just check for selectedIndex==0.
I believe integers are a better practice for option values. Anyhow, the snippet below doesn't care if your default option value is an empty string or a zero value.
var birthMonth = document.registration_form.Birth_Month;
if(birthMonth.options[birthMonth.selectedIndex].value === false){
alert('Please fill select Month!');
}
You do not need to use 'selectedIndex'
<select name="Birth_Month">
<option value="" SELECTED>- Month -</option>
<option value="January">January</option>
<option value="Fabruary">Fabruary</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
if (document.getElementById('Birth_Month').value === '')
{
alert('Please fill select Month!');
}
OR
<select name="Birth_Month">
<option value="they_did_not_select_anything" SELECTED>- Month -</option>
<option value="January">January</option>
<option value="Fabruary">Fabruary</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
if (document.getElementById('Birth_Month').value === 'they_did_not_select_anything')
{
alert('Please fill select Month!');
}