I know there's questions like this in here, but I couldn't find an answer that would work for me.
What I want is to show form "default" is certain options are selected (In this case everything but "Ban Appeal" or "Ban Appeal (Spanish)", and I want form "unban" to be displayed only if Ban Appeal, or Ban Appeal (Spanish) is selected the shortest and easiest way possible.
I know it's possible with JQuery or Javascript
Here's my code:
<select>
<option value="Ban Appeal" selected="selected"><-- Choose Topic --></option>
<option value="Ban Appeal">Ban Appeal</option>
<option value="Ban Appeal (Spanish)">Ban Appeal (Spanish)</option>
<option value="Bug Report">Bug Report</option>
<option value="Hacker Report">Hacker Report</option>
<option value="Staff Application">Staff Application</option>
<option value="Staff Complaint">Staff Complaint</option>
<option value="English">English</option>
<option value="Spanish">Spanish</option>
<option value="Suggestion">Suggestion</option>
</select>
<form name="default" id="default" style="display:none"> <!-- Template for every option but Unban/Spanish Unban -->
<table>
<!-- Leaving out everything in here because it's a lot -->
</table>
</form>
<form name="unban" id="unban" style="display:none"> <!-- Template for unban/Spanish unban -->
<table>
<tr>
<!-- Leaving out everything in here because it's a lot. -->
</tr>
</table>
</form>
With jQuery you can add a function when the select is changed. Then, check which value it has and show or hide the forms accordingly, like this:
$(document).ready(function(){ // you probably have a document-ready function already
$('select').change(function(){ // onchange event
switch ($(this).val()) { // check the value
case 'no-select':
$('form').hide();
break;
case 'Ban Appeal':
case 'Ban Appeal (Spanish)':
$('form#unban').show();
$('form#default').hide();
break;
default:
$('form#default').show();
$('form#unban').hide();
}
}).trigger('change'); // trigger the change event to make it work
// directly when the DOM is loaded
});
You should consider giving the select an id as well and use it in the JavaScript; otherwise extra selects in the other forms will cause problems.
I hope it's clear how to extend this little snippet if later you want to add more forms or options.
Just a little shorter even previous answer works as expected:
$(function(){
$('select').on('change', function(){
var indexAppeal = !this.value.indexOf('Ban Appeal');
$('#default').toggle(indexAppeal);
$('#unban').toggle(!indexAppeal);
}).change();
});
Related
I tried googling this but I am getting only on event trigger searches instead of what I am looking for.
I want to dynamically click on any of the options in the select dropdown by using the value or the text if possible.
HTML
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>
I am not sure if I need to use something with $("#certainspamselectid").click..... but I am not sure what to use after click. I would have tried more things but my google searches keep pinpointing me for on event triggers when I just want to click on one of these options using either JS or jQuery.
I have read your problem and honestly, I can't understand what you want exactly.
However, it looks like you want to select some certain option of the select dropdown.
If that's right, you don't need to call some kind of click function.
You can do it easily with jQuery.
For example, imagine that you are going to select third option - "moved to junk email folder". Then you can select it by code like below.
$("#certainspamselectid").val(1);
If my answer is not enough for you, let me know detail of your problem.
With <select> what you need is .change instead of .click
Here is a quick example .. change the $value and check again
$("#certainspamselectid").on('change' , function(){
console.log("Value Changed To: "+$(this).val());
if($(this).val() == 5){
console.log("value 5 is selected");
}
});
let $value = 4;
$("#certainspamselectid").val($value).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>
why don't you simply change the value of the select like this
$("#certainspamselectid").val(4)
It will automatically show the text from the selected option
I don't think that clicking on an option would help you
I have a list of users that can be selected (multiple selection is possible). Of course all users can be selected manually, which is excellent.
Further on I have user groups. Most of the times it is required to select only those users of a group. Therefore i would like to have a kind of quickway to add all the users, just by clicking on the a group name.
I'm a big fan of select2, but i wasn't able to get this to work.
I have found that via the .val() function elements could be selected. But these elements are only displayed when another element is selected.
So i need a kind of update function. How can i do this?
I have tried to trigger events (like change) but without success.
Can you help me?
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.full.js"></script>
<script type="text/javascript">
$("#id_invited_user").select2({
"placeholder": "Select user",
});
$("#testbuttonclick").on('click',function (clickEvent){
clickEvent.preventDefault();
$("#id_invited_user").val([1,2]);
});
</script>
<select multiple="multiple" class="selectmultiple form-control"
id="id_invited_user" name="invited_user">
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
<option value="4">Option4</option>
<option value="5">Option5</option>
</select>
<a href="" id="testbuttonclick" >select predefined options</a>
You have all of the right code, except you are missing one important detail.
Whenever you change the value of Select2 (or any other JavaScript component), you should always trigger the change event. This event is nativly triggered by the browser when the value is changed, but it must be manually triggered when the value is changed programmatically.
$("#id_invited_user").trigger("change");
This should always be placed after your call to .val(xyz).
Im trying to get a dynamic update of my select list depending on what radio button is checked.
I have 3 files:
maleweight.html:
<option value="blank"></option>
<option value="Pluma -64.0 kg">Pluma -64.0 kg</option>
<option value="Pena -70.0 kg">Pena -70.0 kg</option>
<option value="Leve - 76.0 kg">Leve - 76.0 kg</option>
<option value="Médio -82.3 kg">Médio -82.3 kg</option>
<option value="Meio-Pesado -88.3 kg">Meio-Pesado -88.3 kg</option>
<option value="Pesado -94.3 kg">Pesado -94.3 kg</option>
<option value="Super Pesado -100.5 kg">Super Pesado -100.5 kg</option>
<option value="Pesadíssimo +100.5 kg">Pesadíssimo +100.5 kg</option>
femaleweight.html:
<option value="blank"></option>
<option value="Rooster -48.5 kg">Rooster -48.5 kg</option>
<option value="Super Feather -53.5 kg">Super Feather -53.5 kg</option>
<option value="Feather -58.5 kg">Feather -58.5 kg</option>
<option value="Light - 64.0 kg">Light - 64.0 kg</option>
<option value="Middle -69.0 kg">Middle -69.0 kg</option>
<option value="Medium Heavy -74.0 kg">Medium Heavy -74.0 kg</option>
<option value="Heavy -79.3 kg">Heavy -79.3 kg</option>
<option value="Super Heavy -84.3 kg">Super Heavy -84.3 kg</option>
<option value="S. Super Heavy +84.3 kg">S. Super Heavy +84.3 kg</option>
newuser.php:
<tr>
<td><b>Køn:</b></td>
<td><input type="radio" name="Mand" value="Mand" id="male" onclick="update()">Mand
<input type="radio" name="Kvinde" value="Kvinde" id="female" onclick="update()">Kvinde</td>
</tr>
<tr>
<td><b>Vægt:</b></td>
<td><select id="weight" name="vægt" id="selectv">
<script language="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js">
function update() {
if (document.getElementById('male').checked) {
$("#weight").load("maleweight.html");
}
else if (document.getElementById('female').checked) {
$("#weight").load("femaleweight.html");
}
}
</script>
</select></td>
</tr>
I have 2 problems:
The radio buttons seem broken, i can choose both at the same time and i can not "uncheck" them. - Maybe because of the script not workind properly?
When i click either of the radio buttons the select list is not updated.
I have tried:
Including (just naming the file ex: maleweight.php).
Javascript (could not make it work).
.get instead of load.
Tried .checked == true
Tried different solutions (not for the exactly same) listed here on SO.
Niether of them will work for me. What am i missing?
Thanks in advance!
Best regards,
Casper
EDIT:
The page where everything is going down: http://www.casperwmn.dk/tiljonas/nyprofil.php
I see a few obvious problems with your code.
You should use the same name for both radio buttons, if you want to make sure only of one them can be selected.
You shouldn't put the JavaScript within your select-element. As soon as the the first .load() method completes, it will remove the entire JavaScript as it replaces the content of your select-element. I'm also fairly certain that it is invalid HTML to do so (a <select> element can only have <option> elements as children).
You cannot both load an external JavaScript-file and write your own JavaScript with the same <script> tag, you will have to have two separate <script> tags - one for loading the jQuery source, and one for writing your own JavaScript.
Your <select> element has two ID attributes, which isn't valid HTML. Remove one of them, and use the one you keep as the selector in your JavaScript.
<script language="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js">
is not the right way to load a JavaScript. Instead of language="text/javascript" it should be type="text/javascript", but you could just as well get rid of the attribute all together, as JavaScript is the default language for the <script> element.
Since you are using jQuery to load the content, why not use it for the complete solution? If you change the name of your radio-buttons to say gender, and the values to male/female, and remove the inline onlick-attribute. Then you could do it all with a small piece of jQuery.
$(function() {
$("input[name='gender']").on("click", function() {
var gender = $(this).val();
$("#weight").load(gender + "weight.html");
});
});
The radio buttons seem broken, i can choose both at the same time and i can not "uncheck" them. - Maybe because of the script not workind properly?
You have to assign them the same name attribute. This puts them in the same group so that they can't be selected simultaneously.
When i click either of the radio buttons the select list is not updated.
Move the script block inside <head>.
Also, you can't put js inside a <script> tag with src attribute. You must use a new <script> tag.
And, your <select> has 2 ids. Although it doesn't get in the way, it is not recommended to do so.
According to w3schools:
When a user clicks on a radio-button, it becomes checked, and all
other radio-buttons with equal name become unchecked.
You should change radiobuttons name attributes so they have the same name.
Separate jquery include and your script, and move your script in head tag:
<script language="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"> </script>
<script>
function update() {
if (document.getElementById('male').checked) {
$("#weight").load("maleweight.html");
}
else if (document.getElementById('female').checked) {
$("#weight").load("femaleweight.html");
}
}
</script>
Name attribute of your tags should be the same.
Three things: select box 1, input box, select box 2.
Based on the selections in select box 1 (drop down list 1), I want either input box to be visible or select box 2 to be visible, but not both.
Any help would be great :) I am populating the options in select box 2 based on the choice in select box 1, but sometimes the user's choice entitles them to enter anything as the input, instead of just choosing from a list of values.
Does anyone know how I can hide/show or add/remove these elements from the page? Would it be more-or-less the same if I had it create a new input box or select box 2 every time the selection changes, and just destroy the last one?
Based on some other questions I notice that I can change the style:none like here
StackOverflow> Replacing a dropdown menu with a text menu
is this the most desirable way to go about this?
I'm still learning the basics of js / DOM so any help (and explanation) would be greatly appreciated!
<select name='field' id='field' size='1' onchange='checkthis(this);'>
<option>please select something</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
<input type='text' id='text1' name='text1' value='' />
<select name='field2' id='field2' size='1'>
<option>please select something</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
<input type='button' id='button' value='Click Me' />
<script language='javascript' type='text/javascript'>
function checkthis(fld) {
switch (fld.selectedIndex) {
case 0:
document.getElementById("text1").style.display = "none";
document.getElementById("field2").style.display = "block";
break;
case 1:
document.getElementById("text1").style.display = "block";
document.getElementById("field2").style.display = "block";
break;
case 2:
document.getElementById("text1").style.display = "block";
document.getElementById("field2").style.display = "none";
break;
case 3:
document.getElementById("text1").style.display = "none";
document.getElementById("field2").style.display = "none";
break;
}
}
</script>
This will hide an element:
style="display:none;"
This will show an element:
style="display:block;"
You can handle the onchange event with a javascript function that will determine which element to hide or show, then change the style for the appropriate element.
BTW, this sort of work is MUCH easier when using JQuery. (But it does shield you from learning some parts of the DOM, if that was your real goal.)
You could also use CSS classes to achieve the same goals, which works better if you want to change many style properties at once. (JQuery would use the addClass, removeClass, or toggleClass functions.)
TOTALLY DIFFERENT APPROACH:
Maybe what you really want is a hybrid textbox / dropdown, called an autosuggest textbox. It would let you select a value, while also allowing free typing when needed.
I'm looking to find the Javascript Event I need to put into jQuery's .bind function in order to have the function triggered when a selection is made from a <select> element.
At the moment I'm using .bind('change',function() { ...}) but I need the event to trigger when the selected option is chosen again.
Any suggestions?
I'm currently doing this successfully by clearing the dropdown box selection so that it can be re-selected. It will allow you to trigger the function again by adding this within your function before the end:
$('select option:selected').removeAttr('selected');
Change on select boxes is unreliable anyway. Read:
http://www.quirksmode.org/dom/events/change.html#t05
I'd probably go for something click (but be suspicious, somebody (--> IE) is going to make your life difficult). Or build something yourself without select.
This is possible, however it is not fully supported. Here is a sample:
html
<select id="selectId">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
jquery
$("#selectId>option").click(function(){
alert(this.value);
});
here is a mediocre approach to handle ie:
<div id="dropdownWrapper">
<select id="selectId">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
</div>
js
var clickCount_guid324fF = 0;
$("#dropdownWrapper").click(function(){
if(++clickCount_guid324fF % 2 == 0){
alert($("#selectId").val());
clickCount_guid324fF = 0;
}
});
Wouldn't click work? .bind('click',function() { ...})
I once did this using mouseup, and checked where the event originated. If it was an option element, i handled the select. No listening on onchange at all:
<body>
<select id="select0">
<option value="0">option 0</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
<script type="text/javascript">
$('#select0').bind('mouseup', function (e) {
var src = e.target;
if (src.nodeName.toLowerCase()==='option') {
doMagicOnSelect(this);
}
});
function doMagicOnSelect(selectElem) {
console.log('current value:'+selectElem.value);
}
</script>
</body>
There is no reliable event fired when a selected option is re-chosen.
Whilst on some browsers you can catch events originating from an <option> (which you could use to trap click and keyboard events if you had the patience to try to reproduce a browser's select handling), this is unstandardised and doesn't work in IE (as it uses native Windows widgets to implement select boxes, which don't give that kind of granular access).
If you need to be able to re-fire an event when the same option is chosen again, what you have doesn't really sound like a select box to me; it could perhaps be better replaced with a scripted pop-up div full of buttons. (There are plenty of scripts that will substitute a select box for a scripted div to give you greater control on browsers where JavaScript is available.)
bind the change AND click event
$select.bind("change click", function (event) { // do something });