This is my code. It is in a php file. It doesn't quite do what I want. It hides one option and displays the other, but what I need to do is not just the option to be hidden visually, but not to display at all in the html. Now if you click view source it shows all the divs. I need it when I click one option, the others to disappear from the html and view page source, just the selected to be in there. Any ideas on that?
<select name="type" onchange="showstuff(this.value);">
<option value="code">Code</option>
<option value="look">Look</option>
<option value="have" selected>Have</option>
</select>
<div id="have" style="display:block;">1</div>
<div id="look" style="display:none;">2</div>
<div id="code" style="display:none;">3</div>
<script>
function showstuff(element){
document.getElementById("have").style.display = element=="have"?"block":"none";
document.getElementById("look").style.display = element=="look"?"block":"none";
document.getElementById("code").style.display = element=="code"?"block":"none";
}
</script>
You can create a div to put the active option on it.
Something like this
<select name="type" onchange="showstuff(this.value);">
<option value="code">Code</option>
<option value="look">Look</option>
<option value="have" selected>Have</option>
</select>
<div id="optionContainer">
</div>
<script>
//Object with the options. you can access for example have with options['have'] or options.have
var options = {'have':'<div id="have"><b>1</b></div>',
'look':'<div id="have"><b>2</b></div>',
'code':'<div id="have"><b>3</b></div>'};
function showstuff(element){
//Replace the inner HTML of the div optionContainer with the string in the option
document.getElementById("optionContainer").innerHTML = options[element];
}
</script>
I created this jsfiddle to see it in action
Using jquery methods- show(), hide() and remove(). One can use $("#id").remove() to remove the html from the rendered page.
https://api.jquery.com/remove/
Related
I have a search and filter form (see top of page over the posts grid) here:
https://ba2018.wpengine.com/sf-test-side
The second field of the form named "Boligtype" is a dropdown allowing multiple choices.
I want to create a button elsewhere on the same page (outside of the search and filter form) - which on click activates the "Villa" option in the above-mentioned dropdown.
I am new to js so have tried some different options myself, but pretty sure they have been pretty long shots. All I know is I need an "onClick" event, from researching articles here and on Google. But I am still new to js, so don't know where to take it from here really:
<button onclick="myFunction()">Villas</button>
<script>
function myFunction() {
}
</script>
You can find the element and trigger the click event (or whatever event you are listening to).
function myFunction() {
const select = document.querySelector('#mySelect'); // Find element
select.click(); // Click element
// If you are not listening to click or need a different event
const event = new Event('customEvent');
select.dispatchEvent(event);
}
With your particular page it seems you are listening on the label
document.querySelector('.sf-field-post-meta-filter_boligtype > label').dispatchEvent(new Event('click'))
Here is a simple example that shows how you can make first option in the drop down selected with button click:
<!Doctype html>
<html>
<head>
<script>
function buttonClick(){
document.getElementById("first").selected = true;
}
</script>
</head>
<body>
<select id="stateSelect" name="stateSelect">
<option value="none" id="first">first option</option>
<option value="AL">second option</option>
<option value="AK">third option</option>
</select>
<button type="button" onclick="buttonClick();" id="button"> click me!</button>
</body>
</html>
we add an event listener to the button using onclick="" attribute so the function buttonClick(); will be called and activate the first select option therefor you can make this for whatever option you need.
If this solves your problem I will explain this.
function myfunction(value) {
console.log(value);
switch (value) {
case "hotel": alert("hotel");
// $('#mybutton').addClass("d-none"); //you can add this if you are using bootstrap
$('#mybutton').attr('hidden', true);
break;
case "villa":
alert("villa");
// $('#mybutton').removeClass("d-none"); //you can add this if you are using bootstrap
$('#mybutton').removeAttr('hidden');
break;
case "test": alert("test");
// $('#mybutton').addClass("d-none"); //you can add this if you are using bootstrap
$('#mybutton').attr('hidden', true);
break;
default: alert("nulll");
// $('#mybutton').addClass("d-none"); //you can add this if you are using bootstrap
$('#mybutton').attr('hidden', true);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form">
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1" onchange="myfunction(this.value)">
<option value="hotel">hotel</option>
<option value="villa">villa</option>
<option value="test">test</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<button id="mybutton" class="btn btn-primary" hidden>Click the Villa option</button>
I am trying to write to a div the dynamic value of a drop down list, like this:
JQuery looks like this
$.each($('.shoppingCart_qty-select'), function () {
var br = document.createElement('br');
$("#qtyOrderPreview").append($(this).html()).append(br);
});
Markup looks like this
<div class="shoppingCart_qtyArea">
<div class="shoppingCart_qtyLabel">QTY</div>
<select class="shoppingCart_qty-select">
<option value="1">#group.First().Count</option>
</select>
</div>
<div id ="qtyOrderPreview"></div> <!-- WRITE IT HERE -->
But, I cannot see any value being put on the page, although #group.First().Count has a value.
What do I have to do different to be able to get the value from the drop down list and place it on the div, using jquery?
Many thanks.
The key is you need to get HTML from <option> not <select>
$.each($('.shoppingCart_qty-select'), function() {
var br = document.createElement('br');
$("#qtyOrderPreview").append($(this).find('option').html()).append(br);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shoppingCart_qtyArea">
<div class="shoppingCart_qtyLabel">QTY</div>
<select class="shoppingCart_qty-select">
<option value="42">42</option>
</select>
</div>
<div id="qtyOrderPreview"></div>
I'd like to add and remove options from one drop down menu using JQuery given a selected option in another.
HTML:
<form action='quickLook.py' method = 'post'>
First DropDown Menu
Specify Channel:
<select id='bolometer'>
<option selected id='Dual' value = 'Dual' >Dual
<option id='Top' value = 'Top' >Top
<option id='Bottom' value = 'Bottom' >Bottom
</select>
Second DropDown Menu
<br>Specify Data to Display:
<select id='target'>
<option selected id='Spectrum' value = 'Spectrum'>Spectrum
<option id='Interferogram' value = 'Interferogram'>Interferogram
<option id='SNR' value = 'SNR'>SNR
<option id='Diff_Band' value = 'Diff_Band'> Diff_Band
</select>
<input type='submit' value= 'Query Images'>
</form>
I'd like to do something like this is JQuery:
$("#Dual").click(function() {
$("#target").append("#Diff_Band");
$("#target").remove("#Interferogram");
$("#target").remove("#SNR");
});
$("#Top").click(function() {
$("#target").append("#Interferogram");
$("#target").append("#SNR");
$("#Diff_Band").remove();
});
I want to append or remove the already written html.
What is the best way to do this?
Thank you for your time!
This is a similar problem I've encountered before working with Safari. A solution is to use .detach() instead of remove() as it keeps all jQuery data associated with the removed elements. Check this jsfiddle: http://jsfiddle.net/Ueu62/
I have the below javascript function to go to the selected box value url.
function go(x) {
alert(x);
location = x.value;
}
I cannot use getElementById
There may be more than 1 select box as the user differs
I wrote a php to print all the selectbox inside a form and div
<div class="styled-select">
<form name="menu">
<select id=Admission onchange=go(this)>
<option value=/admission>Add Existing Students</option>
</select>
<select id=Student onchange=go(this)>
<option value=www.bing.com>Student Details</option>
</select>
</form>
</div>
All suggestions are welcome.
You don't access the value of the element properly. Use this instead:
function go(x) {
location = x.options[x.selectedIndex].value;
}
You also won't get an onchange event for a <select> with only a single option ever.
UPDATE: The original question asked was answered. However, the code revealed for all. So, I've modified my question below:
So I have the following dynamically generated html via php
<div class="image-link link-posttypes mainSelector1">
<select id="wp_accordion_images[20110630022615][post_type]" name="wp_accordion_images[20110630022615][post_type]">
<option value="">default</option>
<option value="post" class="post-type">Post</option><option value="page" class="post-type">Page</option><option value="dp_menu_items" class="post-type">Menu Items</option>
<option value="wps_employees" class="post-type">Employees</option><option value="custom-link">Custom Link</option>
</select>
</div>
<div class="image-link link-pages1">
<select id="wp_accordion_images[20110630022615][page_id]" name="wp_accordion_images[20110630022615][page_id]">
<option value="50" class="level-0">About</option>
<option value="65" class="level-0">Contact</option>
<option value="2" class="level-0">Sample Page</option>
<option value="60" class="level-0">Staff</option>
</select>
</div>
<div class="image-link link-posts1">
<select onchange="javascript:dropdown_post_js(this)" id="wp_accordion_images[20110630022615][post_id]" name="wp_accordion_images[20110630022615][post_id]">
<option value="http://localhost/tomatopie/?p=1" class="level-0">Hello world!</option>
</select>
</div>
<div class="image-link link-custom1">
<input type="text" size="25" value="" name="wp_accordion_images[20110630022615][image_links_to]">
</div>
***THEN IT REPEATS four times: where the #1 goes to 2..3...4 (max to 4 at this time).
I have the ability to label div .classes, select #ids, and option classes. However, what I want to be able to do is based on the option selected from div .link-posttypes, I want to reveal .link-pages (if page is selected) or .link-posts (if post is selected) and .link-custom for all others (except the default).
So as written on the screen there should only be the initial div, and once the user selects an item, the appropriate div appears.
I have never developed anything in jQuery or javascript. This is my maiden voyage. Any help will be greatly appreciated!
***Also, this will be loaded via an external js file.
Here is the final answer that worked:
jQuery(document).ready(function($) {
$(".link-posttypes select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="post"){
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").slideDown('slow');
$(this).parent().nextAll(".link-custom").hide();
}else if(selectedVal=="page"){
$(this).parent().nextAll(".link-pages").slideDown('slow');
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().nextAll(".link-custom").hide();
}else if(selectedVal!=""){
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().next().nextAll(".link-custom").slideDown('slow');
}else{
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().nextAll(".link-custom").hide();
}
});
});
jQuery(document).ready(function($) {
$(".image-content select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="content-limit"){
$(this).parent().next().nextAll(".content-limit-chars").slideDown('slow');
$(this).parent().nextAll(".content-custom").hide();
}else if(selectedVal=="custom-content"){
$(this).parent().nextAll(".content-limit-chars").hide();
$(this).parent().next().nextAll(".content-custom").slideDown('slow');
}
});
});
Thanks for your help!
Assuming that you're outputting proper IDs, you can do something like this (note I replaced the id):
$(window).load(function(){
// hide all the divs except the posttypes
$('.image-link').not('.link-posttypes').hide();
$('#wp_accordion_images_20110630022615_post_type').change(function() {
var divSelector = '.link-' + $(this).val();
$('.image-link').not('.link-posttypes').hide();
$(divSelector).show();
});
});
Also, consider changing your options like this:
<option value="posts" class="post-type">Post</option>
<option value="pages" class="post-type">Page</option>
<option value="menu_items" class="post-type">Menu Items</option>
<option value="wps_employees" class="post-type">Employees</option>
<option value="custom">Custom Link</option>
Here's a jsfiddle for this: http://jsfiddle.net/JrPeR/
There's my understandable jquery script
jQuery(document).ready(function($) {
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").hide();
$(".link-posttypes select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="post"){
$(".link-pages").hide();
$(".link-posts").show();
$(".link-custom").hide();
}else if(selectedVal=="page"){
$(".link-pages").show();
$(".link-posts").hide();
$(".link-custom").hide();
}else if(selectedVal!=""){
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").show();
}else{
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").hide();
}
});
});
Demo here. Take me couple minute to make you easy to understand. Have fun.
http://jsfiddle.net/JrPeR/3/
added a conditional so if its not the two variables it defaults to the custom.