First of all, let me say I am trying to modify existing code and I am pretty unfamiliar with jquery so the script part is probably way off.
I'd have a select menu with integers for values, and when they are selected I would like to set the HTML inside the span id "stylediv"
javascript:
<script>
function styleselect() {
if (document.getElementById('globalstyleselect').value == "3") {
$(".stylediv").html('<b>Boca Style</b>');
}
if (document.getElementById('globalstyleselect').value == "2") {
$(".stylediv").html('<b>Bella Style</b>');}
}
if (document.getElementById('globalstyleselect').value == "1") {
$(".stylediv").html('<b>Terra Style</b>');
}
</script>
Html:
<select id="globalstyleselect" onchange="styleselect()">
<option value="1">Terra</option>
<option value="2">Bella </option>
<option value="3">Boca</option>
</select>
<span id="stylediv">Text to display here</span>
Change this $(".stylediv") for this $("#stylediv") since .stylediv means all elements which have class stylediv and #stylediv all elements which have id stylediv.
In your case you have a div with this id (<span id="stylediv">Text to display here</span>), so you must use the id selector.
Also I recommend you not to repeat the same selector so many times (this is error-prone); instead get it inside a variable and use it... and keep consistency in the code: if you're using jQuery get all elements with jQuery (though this is a matter of preferences)
See below snippet with the js improved too.
function styleselect() {
var value = $('#globalstyleselect').val();
var div = $("#stylediv");
if (value == "3") {
div.html('<b>Boca Style</b>');
}
if (value == "2") {
div.html('<b>Bella Style</b>');
}
if (value == "1") {
div.html('<b>Terra Style</b>');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="globalstyleselect" onchange="styleselect()">
<option value="1">Terra</option>
<option value="2">Bella </option>
<option value="3">Boca</option>
</select>
<span id="stylediv">Text to display here</span>
In jQuery, # is for selecting by id and . is for selecting by class. I would also recommend you run your function on window load so the initial value for the select is displayed.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="globalstyleselect" onchange="styleselect()">
<option value="1">Terra</option>
<option value="2">Bella </option>
<option value="3">Boca</option>
</select>
<span id="stylediv">Text to display here</span>
<script>
$(window).load(function(){
styleselect();
})
function styleselect() {
if (document.getElementById('globalstyleselect').value == "3") {
$("#stylediv").html('<b>Boca Style</b>');
}
if (document.getElementById('globalstyleselect').value == "2") {
$("#stylediv").html('<b>Bella Style</b>');}
}
if (document.getElementById('globalstyleselect').value == "1") {
$("#stylediv").html('<b>Terra Style</b>');
}
</script>
Related
I am trying to populate a form option value if it's attribute quantity equals zero.
My goal is to add the a message to the current option value
My html is:
<select class="valid">
<option disabled="disabled" selected="selected" value="">Select Bar</option>
<option value="1" quantity="99">value 1 </option>
<option value="2" quantity="0">value 2 </option>
</select>
So far I've tried the following in jQuery but it's not working:
if($(this).attr('quantity') == '0') {
$(this).append('<span>message</span>');
}
If you don't care about preserving the original message, than you can simply say $(this).text("message"). Leave out the <span> since it cannot be rendered inside of an <option> element anyway.
if($(this).attr('quantity') == '0') {
$(this).text('message');
}
If you want to preserve the original message, you have a couple options. One would simply be to append the new message to the original, however, it may get tricky to remove it later, so I would suggest having some sort of delimiter so you can easily identify the original vs the appended message, like so:
var $option = $(this);
if($option.attr('quantity') == '0') {
$option.text($option.text().trim() + ' (message)');
}
Then, to remove the message, you can do something like this:
$option.text($option.text().slice(0, $option.text().indexOf('(')).trim());
You can populate the option with like this,
$(document).ready(function () {
$('.valid').on('change', function () {
if ($(this.options[this.selectedIndex]).attr('quantity') == 0) {
$(this.options[this.selectedIndex]).find('span').remove();
$(this.options[this.selectedIndex]).append('<span>Message</span>')
}
});
});
JSFIDDLE
I'm not entirely sure of what you're trying to achieve from your question, but you cannot add html elements to an option element. You can however change the text as follows:
$(document).on('change', '.valid', function(){
var selected = $('.valid > option:selected');
if(selected.attr('quantity') == '0'){
selected.text('something else');
}
});
if you wanted to append an error you could do so by using jQuery append() or concatenating with the original value. Alternatively if you wanted it as validation outside of the select box, you could simply assign to the value of a div by replacing the line inside of the if statement.
<select class="valid" onchange="quality(this.options[this.selectedIndex].getAttribute('quantity'));">
<option disabled="disabled" selected="selected" value="">Select Bar</option>
<option value="1" quantity="99">value 1 </option>
<option value="2" quantity="0">value 2 </option>
</select>
<span id="msg"></span>
<script type="text/javascript">
function quality(val) {
if(parseInt(val) == 0){
document.getElementById("msg").innerHTML = "Message";
}
}
I have this jquery function but it is too long for me. Is there any way to make as one jquery change function. I need your help.
$(document).ready(function () {
$('.sub-cat select').change(function () {
if ($('.sub-cat select option:selected').text() == "Other") {
$('.sub-cat .other-category').show();
}
else {
$('.sub-cat .other-category').hide();
}
});
$('.prod-type select').change(function () {
if ($('.prod-type select option:selected').text() == "Other") {
$('.prod-type .other-category').show();
}
else {
$('.prod-type .other-category').hide();
}
});
$('.prod-finnish select').change(function () {
if ($('.prod-finnish select option:selected').text() == "Other") {
$('.prod-finnish .other-category').show();
}
else {
$('.prod-finnish .other-category').hide();
}
});
$('.prod-color select').change(function () {
if ($('.prod-color select option:selected').text() == "Other") {
$('.prod-color .other-category').show();
}
else {
$('.prod-color .other-category').hide();
}
});
$('.prod-included select').change(function () {
if ($('.prod-included select option:selected').text() == "Other") {
$('.prod-included .other-category').show();
}
else {
$('.prod-included .other-category').hide();
}
});
$('.prod-series select').change(function () {
if ($('.prod-series select option:selected').text() == "Other") {
$('.prod-series .other-category').show();
}
else {
$('.prod-series .other-category').hide();
}
});
});
Assign a common class i.e. 'commonClass' to all the parent element i.e. 'sub-cat, prod-included,...', then use various DOM traversal methods to target 'other-category' element.
Learn to use this, element which initiated the event
$('.commonClass select').change(function () {
$(this).closest('.commonClass').find('.other-category').toggle($('option:selected', this).text() == "Other");
});
References
.closest()
.find()
.toggle()
Please check below code. On selection of other option
$(document).ready(function () {
$('select').change(function () {
if($(this).find('option:selected').text() == "other"){
$(this).next().show();
}
else{
$(this).next().hide();
}
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
<div class="sub-cat">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="other">other</option>
</select>
<div class="other-category" style="display: none;">
<p>sub-cat other-category</p>
</div>
</div>
<div class="prod-type">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="other">other</option>
</select>
<div class="other-category" style="display: none;">
<p>prod-type other-category</p>
</div>
</div>
</body>
</html>
show below div .
You can select several elements at once by separating their class selections with a comma.
$('.sub-cat, .prod-type, .prod-finnish, .prod-color, .prod-included, .prod-series').change(function() {
var $this = $(this); // cache this so we don't have to wrap it twice
$this.toggle($this.find('option:selected').text() == "Other"));
});
It's then just a matter of using .toggle() and passing in a boolean; In our case whether the selected option has "Other" as its text.
This has a really good performance advantage since you only need one event delegate to handle the change event for all the elements in the selector.
You can utilize data-attributes to help you out. I didnt test out this code, but I think something like this could possibly work. Update your HTML to be something like this
<select data-target="sub-cat"></select>
<div class="other-category" data-target="sub-cat"></div>
Followed by this abbreviated jquery code...
$(document).ready(function () {
$('select').change(function() {
var target = $(this).data('target'),
isSelected = $(that).find('option:selected').text() == "Other";
$(this).find('.other-category[data-target="'+target+'"]').toggleClass(isSelected);
})
});
By storing the attributes in a data-attribute, you can easily access that in your javascript code, targeting specific elements much more easily.
So I have a dropdown menu. The id for this dropdown menu is "courses". This dropdown also has an additional attribute, onclick="displayField();
The dropdown has 2 options.
2 and 3.
Now, I want everything with the class rsform-block-cotecours1 to be hidden depending on which option is chosen.
Here is the JavaScript for that:
function displayField()
{
if(document.getElementById("courses").text == '2';)
document.getElementsByClassName('rsform-block-cotecours1').style.display="none";
if(document.getElementById("courses").text == '3';)
document.getElementsByClassName('rsform-block-cotecours1').style.display="";
}
window.addEvent('domready', function() {
displayField();
});
However, this doesn't work, and I don't know why.
Is this what you are looking for?
Fiddle: fiddle
<select id="courses" onchange="ddlChange()">
<option value="2">2</option>
<option value="3">3</option>
</select>
JavaScript
function ddlChange() {
if (document.getElementById("courses").value =="2"){
document.getElementsByClassName('rsform-block-cotecours1')[0].style.display="none";
alert(document.getElementById("courses").value );
}
if (document.getElementById("courses").value == "3"){
document.getElementsByClassName('rsform-block-cotecours1')[0].style.display="block";
alert(document.getElementById("courses").value );
}
}
Change the code to following and test
function displayField()
{
if(document.getElementById("courses").value == '2';)
document.getElementsByClassName('rsform-block-cotecours1')[0].style.display="none";
if(document.getElementById("courses").value == '3';)
document.getElementsByClassName('rsform-block-cotecours1')[0].style.display="";
}
window.addEvent('domready', function() {
displayField();
});
in case you want to access the ext and not the value of dropdown list in javascript, then use following code to access the text of selected option from drop down
var courseElement = document.getElementById("courses");
var text = "";
if (courseElement.selectedIndex != -1)
{
text = courseElement.options[courseElement.selectedIndex].text;
}
have this code, i want to convert it to be able to allow the user to pick ANY possible select and have div [id='setprice'] show up or something to that effect. currently i have 4 options, but it could be up to 10+ depends on how many are in the database. but it shouldn't matter, i just want which ever gets selected to open the setprice div. Thanks.
$("#category").change(function () {
$("#setprice").hide();
if ($(this).val() == "cow") { $("[id='setprice']").show(); }
else if ($(this).val() == "dog") { $("[id='setprice']").show(); }
else if ($(this).val() == "monkey") { $("[id='setprice']").show(); }
else if ($(this).val() == "kungfoo") { $("[id='setprice']").show(); }
});
HTML
<select id="category">
<option value=''>Select</option>
<option value='cow'>Cow</option>
<option value='dog'>Dog</option>
<option value='monkey'>Monkey</option>
<option value='kungfoo'>kungfoo</option>
</select>
<div id='setprice'>this is hidden onload, then shows on any #category selection</div>
Seems to be alot of cofusion in what im asking, These options i've given are random names, the categories that are going to be loaded, are from a database and more could be added depending how it expands, so i want the script to not show div=setprice, but when anything gets selected in #category to open setprice.
You will need to call the function only when the value of the select box isn't empty.
$("#category").change(function () {
$("#setprice").toggle(!!this.value);
});
Here is a working fiddle.
This is the cleanest you will get this.
DEMO
$("#category").change(function () {
$("#setprice").toggle(!!this.value);
});
The $("#setprice").toggle(!!this.value); is just a way to use a boolean inside the .toggle() method,
otherwise you do it equally like:
var $setPriceEl = $("#setprice");
$("#category").change(function () {
$setPriceEl.hide(); // hide by default
if(this.value) $setPriceEl.show(); // show only if has value
});
or even:
$("#category").change(function () {
$("#setprice")[this.value ? "show" : "hide" ]();
});
Please find the answer below ...
HTML :
<select id="category">
<option value=''>Select</option>
<option value='cow'>Cow</option>
<option value='dog'>Dog</option>
<option value='monkey'>Monkey</option>
<option value='kungfoo'>kungfoo</option>
</select>
<div id='setprice' style="display:none;">this is hidden onload,
then shows on any #category selection</div>
JQUERY :
$(document).ready(function(){
$("#category").change(function() {
$("#category option:selected" ).each(function() {
var str = $( this ).text();
if(str == "Select"){
$("#setprice").hide();
}else{
$("#setprice").show();
$("#setprice").text(str);
}
});
}).trigger("change");
});
This is a follow up question. I am trying to get a input box to be hidden when a pull-down menu has the value "tid and acc". I am at a loss why this code isn't working, any help would much appreciated! Here is a link on jfiddle: http://jsfiddle.net/Mm7c7/
<script>
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').show();
}
else {
$('#tid-acc').hide();
}
});
</script>
<select id="rule-type">
<option value="" selected="selected">None</option>
<option value="tid">tid</option>
<option value="tid and acc">tid and acc</option>
<option value="xid">xid</option>
</select>
<input id="tid-acc">
Your script is being evaluated before your element is ready. Placing the script in a $(document).ready() or after the content it affects will solve the problem
http://jsfiddle.net/Wx8Jf/2
$(document).ready(function(){
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').show();
}
else {
$('#tid-acc').hide();
}
});
});
Couple problems:
You'll either need to wrap the function in $(function(){}) to ensure DOM is ready, or drop it below your HTML (the former is recommended). If you don't wrap it (or drop it), then the script is executed before the elements have actually been rendered, causing $('#rule-type') to be undefined.
Your logic is incorrect (according to your explanation). Your current logic says to hide the input box when anything other than tid and acc is selected.
Working version:
<script>
$(function(){
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').hide();
}
else {
$('#tid-acc').show();
}
});
});
</script>
<select id="rule-type">
<option value="" selected="selected">None</option>
<option value="tid">tid</option>
<option value="tid and acc">tid and acc</option>
<option value="xid">xid</option>
</select>
<input id="tid-acc" />
http://jsfiddle.net/dbrecht/QwkKf/
Take a look here for a working sample: http://jsfiddle.net/Mm7c7/1/
HTML:
<select id="rule-type">
<option value="" selected="selected">None</option>
<option value="tid">tid</option>
<option value="tid and acc">tid and acc</option>
<option value="xid">xid</option>
</select>
<input id="tid-acc">
Javascript:
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').show();
}
else {
$('#tid-acc').hide();
}
});