I want to add value to option based on text in option field.
Here is code:
<select id="select_1">
<option>09:30</option>
<option>10:00</option>
<option>11:30</option>
</select>
jQuery code itself is to automatically add the 'value' attribute and value based on the text
<select id="select_1">
<option value="0930">09:30</option>
<option value="1000">10:00</option>
<option value="1130">11:30</option>
</select>
It's possible?
Yes, this is possible,
To test it, run the code snippet and change the select list.
$("#select_1 > option").each(function() {
this.value = this.text.replace(':', '');
});
$("#select_1").on('input', function() {
alert(this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select_1">
<option>09:30</option>
<option>10:00</option>
<option>11:30</option>
</select>
Inspect in chrome seem like this
Try this
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<select id="select_1">
<option>09:30</option>
<option>10:00</option>
<option>11:30</option>
</select>
</body>
<script>
$(document).ready(function() {
$("option").each(function(index) {
$(this).attr("value", $(this).html());
});
});
</script>
</html>
Related
I want to use the dropdown menu on site.google to link different pages, but I don't know what to
write inside the value field in order to make this code functioning well. Could you please assist me to figure out how I can do that!
<!DOCTYPE html>
<html>
<body>
<form>
<select name="list" id="list" accesskey="target">
<option value='none' selected>Choose a theme</option>
<option value="what do I have to write here!">Page 1</option>
<option value="#what do I have to write here!">Page 2</option>
<option value="#what do I have to write here!">Page 3</option>
</select>
<input type=button value="Go" onclick="goToNewPage()" />
</form>
<script type="text/javascript">
function goToNewPage()
{
var url = document.getElementById('list').value;
if(url != 'none') {
window.location = url;
}
}
</script>
</body>
</html>
You can create an anchor element and click it or use the window.open function with the _top parameter. Like so:
<body>
<form>
<select name="list" id="list" accesskey="target">
<option value='none' selected>Choose a theme</option>
<option value="https://google.com">Google</option>
<option value="https://developers.google.com/">Developers</option>
<option value="https://developers.google.com/apps-script">Apps Script</option>
</select>
<input type=button value="Go" onclick="goToNewPage()" />
</form>
<script>
const list = document.getElementById('list')
function goToNewPage(){
// Alternative 1 window.open(list.value, '_top')
// Alternative 2
const a = document.createElement('a')
a.href = list.value
a.target = '_blank'
a.click()
}
</script>
</body>
I use this link (Select 2 with multiselct option) for my HTML pages.
How can I deselect all selected option by J Query?
I try this code $('#myIdSelectForm > option').removeAttr("selected"); and so many other J Query codes but not working.
$(function() {
$('#field2').select2();
});
$('#myIdSelectForm > option').removeAttr("selected");
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<select name="myIdSelectForm" id="field2" multiple="" multiselect-search="true" multiselect-select-all="true" multiselect-max-items="3" style="display: none;">
<option>Abarth</option>
<option>Alfa Romeo</option>
<option>Aston Martin</option>
<option>Audi</option>
<option>Bentley</option>
<option>BMW</option>
<option>Bugatti</option>
<option>Cadillac</option>
<option>Chevrolet</option>
<option>Chrysler</option>
<option>Citroën</option>
<option>Dacia</option>
<option>Daewoo</option>
<option>Suzuki</option>
<option>Tesla</option>
<option>Toyota</option>
<option>Volkswagen</option>
<option>Volvo</option>
<option>
</option>
</select>
You need to use a proper id selector #field2 not a name as an id.
Here I use a second button just to illustrate clearing all when we click that button by triggering a custom event and then clearing the value then triggering a change.
I also added a button to clear just one - the last selected option in this case.
$(function() {
$('#field2').select2();
$('#field2').on('clear-all', function(event) {
console.log('Doing:', event.type);
$(this).val(null).trigger('change');
}).on('clear-last', function(event) {
console.log('Doing:', event.type);
$(this).find('option:selected')
.last().prop("selected", false);
$(this).trigger("change");
});
$("#test-deselect").on("click", function() {
console.log('clearing');
$('#field2').trigger('clear-all');
});
$("#test-deselect-last-one").on("click", function() {
console.log('clearing last');
$('#field2').trigger('clear-last');
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<select name="myIdSelectForm" id="field2" multiple="" multiselect-search="true" multiselect-select-all="true" multiselect-max-items="3">
<option selected>Abarth</option>
<option>Alfa Romeo</option>
<option selected>Aston Martin</option>
<option>Audi</option>
<option>Bentley</option>
<option>BMW</option>
<option>Bugatti</option>
<option>Cadillac</option>
<option>Chevrolet</option>
<option>Chrysler</option>
<option>Citroën</option>
<option>Dacia</option>
<option>Daewoo</option>
<option>Suzuki</option>
<option>Tesla</option>
<option>Toyota</option>
<option>Volkswagen</option>
<option>Volvo</option>
<option></option>
</select>
<button id="test-deselect" type="button">Deselect all</button>
<button id="test-deselect-last-one" type="button">Deselect last one</button>
I have a simple dropdown list with the first option selected and disabled and two other options
when I click on "Submit" and the dropdown is shown I get the value of the dropdown
When the dropdown list is hidden I always get the value "null" even when I trying to set the value to a string "None" with $("#select").val("None") commmand
How can I set the value to "None" after hiding the dropdown list ?
===== Code output: ====
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
$("select").hide();
$("select").val("None");
});
$(".btn2").click(function(){
$("p").show();
$("select").show();
$("#select option:first").prop("selected", true);
});
$("#btnSmbt").click(function() {
$("#select").val("None");
alert($("#select").val());
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<select id="select">
<option value="" disabled selected>Select Number</option>
<option value"1">1</option>
<option value"2">2</option>
</select>
<br><br>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
<br><br>
<button type="button" class="btn btn-default" id="btnSmbt" name="btnSmbt">Submit</button>
</body>
</html>
There's a couple of issues in your code. Firstly the HTML has some errors in the option elements; you're missing the = between the value attribute and the value you provide.
Secondly, in the jQuery code you're setting the value of 'None' to the select, yet no option it contains has that value. I presume you're trying to select the first option element so that should be an empty string instead: .val('').
Lastly you alert() the value after you re-set it back to the default. This is why you always see nothing in the alert itself. Swap those lines around.
With that said, try this:
$(document).ready(function() {
$(".btn1").click(function() {
$("p").hide();
$("select").hide();
$("select").val('');
});
$(".btn2").click(function() {
$("p").show();
$("select").show();
$("select").val('');
});
$("#btnSmbt").click(function() {
alert($("#select").val());
$("#select").val('');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<select id="select">
<option value="" disabled selected>Select Number</option>
<option value="1">1</option>
<option value="2">2</option>
</select><br><br>
<button class="btn1">Hide</button>
<button class="btn2">Show</button><br><br>
<button type="button" class="btn btn-default" id="btnSmbt" name="btnSmbt">Submit</button>
"None" is not existing value in your select option , thus it'll give you null
Also you html value options misses the =
In order to get a value you have to set an existing value between those option by example 1 or 2 as your example shows see below snippet:
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
$("select").hide();
$("select").val("1");
});
$(".btn2").click(function(){
$("p").show();
$("select").show();
$("#select option:first").prop("selected", true);
});
$("#btnSmbt").click(function() {
$("#select").val();
alert($("#select").val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<select id="select">
<option value="" disabled selected>Select Number</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br><br>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
<br><br>
<button type="button" class="btn btn-default" id="btnSmbt" name="btnSmbt">Submit</button>
In addition to the other answers, note that disabled controls do not have values.
So your first option, which is disabled, will always give the value null regardless of its actual value
See the snippet for a demonstration of two select, one with disabled entry.
console.log($("#select1").val())
console.log($("#select2").val())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select1">
<option value="anyvalue" disabled selected>Select Number</option>
</select>
<select id="select2">
<option value="anyvalue" selected>Select Number</option>
</select>
The actual issue in your code is likely (as pointed out in other answers) due to clearing it before displaying it. But for future reference if anyone tries to get a values of a disabled option, this would be the cause of it giving null.
I have the following code:
<div class="form__group form__group--select" id="choice">
<select name="area" class="selectbox form__element">
<option selected="selected" value="">Sparte auswählen</option>
<option value="Erdgas">Erdgas</option>
<option value="Strom">Strom</option>
<option value="Telekommunikation">Telekommunikation</option>
<option value="Energiedienstleistungen">Energiedienstleistungen</option>
</select>
<div class="form__message">
<div class="form__infotext"></div>
<div class="form__error"></div>
</div>
</div>
</div>
<div class="columns medium-6" id="kWh">
<t:optionalTextField label="Ihr Jahresverbrauch in kWh" name="kWhPerYear" maxLength="100"/>
</div>
I would like to make "columns medium-6" be visible only if particular item is selected in "selectbox form__element", for example "Strom". Just to mention that this code is taken from .jsp file in which there are no 'head' and 'body' tags.
I already tried this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
$("#choice").change(function() {
if ($(this).val() == "Erdgas" || (this).val() == "Strom") {
$("#kWh").show();
}else{
$("#kWh").hide();
}
});
});
</script>
but it didn't work....I probably missed something, and also I don't know ehre is the best place to put this javascript code.
You need an onchange event on your select:
<select name="area" class="selectbox form__element" onchange="hideColMed6(this)">
Add a script tag with the particular function:
<script type="text/javascript">
function hideColMed6(selected) {
var value = selected.value;
if (value == "Strom")
$(".columns.medium-6").hide();
else
$(".columns.medium-6").show();
}
</script>
I updated the code.
Try below code and its working fine.
$(document).ready(function (){
$(".selectbox").change(function() {
if ($(this).val() == "Erdgas" || $(this).val() == "Strom") {
$("#kWh").show();
}else{
$("#kWh").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form__group form__group--select" id="choice">
<select name="area" class="selectbox form__element">
<option selected="selected" value="">Sparte auswählen</option>
<option value="Erdgas">Erdgas</option>
<option value="Strom">Strom</option>
<option value="Telekommunikation">Telekommunikation</option>
<option value="Energiedienstleistungen">Energiedienstleistungen</option>
</select>
<div class="form__message">
<div class="form__infotext"></div>
<div class="form__error"></div>
</div>
</div>
<div class="columns medium-6" id="kWh">
<label name="kWhPerYear" maxLength="100">Ihr Jahresverbrauch in kWh</label>
</div>
You can use JQuery in order to achieve this, but you have to listen for changes on the select tag, not on the div one:
<script>
$('#select_field_id').change(function() {
var selectionText = $('#select_field_id').find(":selected").text();
if (selectionText == 'something') {
$('.columns.medium-6).show();
} else {
$('.columns.medium-6).hide();
}
});
</script>
This way you listen to changes on the select box and act accordingly.
I currently have a drop down list with a few values in it, I was wondering if it is possible to have a image next to the drop down list that changes corresponding to the value in the drop down list?
This the code for my drop down list. If you need anymore information please ask.
<form id="formddl">
<a id="infoheader">GreenB Colour</a> <br><br>
<div class="header">
<select>
<option value="0">Ivory White</option>
<option value="1">Carbon Black</option>
</select>
</div> <br><br>
<script src="fancystyle1/js/jquery.simple.select.js"></script>
<script type="text/javascript">
$(function() {
$('select').selectBoxes();
});
</script>
</form>
You can do it like this:
$("#iama").children().click(function changeImage(){
var value = $("#iama option:selected").val();
if (value == 1){
$("#image").attr("src","http://lorempixel.com/400/200/");
}
else {
$("#image").attr("src","http://lorempixel.com/600/200/");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select id="iama">
<option value=1>image for value 1</option>
<option value=2>image for another value</option>
</select>
<img id ="image" src="http://lorempixel.com/200/200/"/>