When I open a new site with the selectbox for example site x then the option x is selected like it should but when I return by clicking the arrow in the left corner above I return to site y but option x is still selected.
Can anyone help me?
<nav id="navigation" class="navigation">
Home
<select id="Menu">
<option disabled selected hidden> # </option>
<option href="#">#1</option>
<option href="#">#2</option>
<option href="#">#3</option>
<option href="#">#4</option>
</select>
<script>
document.getElementById('Menu').onchange = function() {
window.location.href =
this.children[this.selectedIndex].getAttribute('href');
}
</script>
What should I add to the script to avoid that problem_
Thank you
Have an hidden input on your pages to identify refresh
<input type="hidden" id="refresh" value="no">
Now use JQuery to check its value & correspondingly refresh the site explicitly,
$(document).ready(function(e) {
var $input = $('#refresh');
$input.val() == 'yes' ? location.reload(true) : $input.val('yes');
});
So basically first time the value would be no when page loads & then changed to yes, later if visited again yes would trigger a refresh.
Courtesy of this SO
Related
Hi I have HTML bootstrap code:
$(document).ready(function() {
$("#us-state").find('select').change(function() {
var $val = $(this).val();
if ($val === 'US') {
$('.us-state-select').show();
} else {
$('.us-state-select').hide();
}
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="col-sm mb-5 us-state-select">
<label>USA STATE</label>
<select name="order_from_address_state" class="form-select">
<option>Choose country</option>
<option value="AL" name="<AL>" selected>Alabama</option>
<option value="AK" name="AK">Arkansas</option>
</select>
</div>
<div class="col-sm mb-5" id="us-state"><label>Send from country</label>
<select name="order_from_address_country" class="form-select">
<option>Send from</option>
<option value="US" name="US">USA</option>
<option value="CA" name="CA" selected>Canada</option>
</select>
</div>
(Also available on JSFiddle)
My problem is simple.
I am using foreach to show all countries and statesm but...
check the jsfiddle.
if country is selected different to the US and its load with this different country, it shows div us-state-select and if u click on different countries, it dissapears and works as expected.
But I dont want to show div with states in the case that page is loaded and its selected different country than US. How to do that?
its obvious on fiddle, I selected canada and on page load there is div with states and when click on different value for example: Send from at country box, states dissapear and it works as expected then.
Please, can you give me some advice?
I am newbie at jquery, thx.
Change your JS to be like this:
I am basically checking this logic once the page is ready and I also added some refactor in your code to help readability
$(document).ready(function() {
const checkValues = () => {
var value = $("#us-state").find('select').val();
console.log(value)
if(value === 'US'){
$('.us-state-select').show();
}else{
$('.us-state-select').hide();
}
}
$("#us-state").ready(checkValues);
$("#us-state").find('select').change(checkValues);
});
I'm wondering if it's possible to have code where the Select option has 2 different value (which effect 2 different things)
Basically, I'm trying to create an option where depending on the select choice, it changes the price and also changes the link that pressing the button will go to.
I found this code on one of the posts here and it works perfectly, but I'm looking to add a Price in between the select menu and the button which is also effected by the select choice.
Eg.
1 Year Only - $50 [Button links to correct purchase link]
Subscription (Billed Annually) - $45/pa [Button links to correct purchase link]
Sorry if i'm not explaining it very well.
<select id="menu">
<option selected="selected" disabled="">Please choose an option</option>
<option value="https://checkout-1-year">1 Year</option>
<option value="https://checkout-subscription">Subscription (Billed Annually)</option>
</select>
<input type="button" id="goBtn" value="Purchase">
<script type="text/javascript">
var goBtn = document.getElementById("goBtn");
var menu = document.getElementById("menu");
goBtn.onclick = function() {
window.location = menu.value;
}
</script>
They can't have two values, but what you can do is set the value and a data- attribute, which can store any string you like and then be retrieved using the data-* Attribute API.
Here's an example:
const list = document.getElementById("menu");
console.log(list.options[1].value, list.options[1].dataset.value);
console.log(list.options[2].value, list.options[2].dataset.value);
<select id="menu">
<option selected="selected" disabled="">Please choose an option</option>
<option value="https://checkout-1-year" data-value="something">1 Year</option>
<option value="https://checkout-subscription" data-value="something else">Subscription (Billed Annually)</option>
</select>
I have to incorporate a Healcode widget (through Mind Body) into the site I'm working on. My goal is to have a button on that page change the dropdown selection of the Healcode widget and reload the widget to reflect the dropdown change.
So far I've been able to create a button that changes the dropdown selection to the desired value when clicked. However it does not reload the widget to reflect the change. I still have to manually click the dropdown to make that happen.
Any help is appreciated!! Here's what I have so far:
HTML FOR THE HEALCODE DROPDOWN FILTERS:
<div class="filters">
<select name="mbo_class" id="mbo_class">
<option value="">All Classes</option><option value="58">200 hour Teacher Training</option>
<option value="3">Basics</option>
<option value="59">Basics/Power</option>
<option value="85">Basics/Restore + Meditation</option>
<option value="156">Cozy Winter YIN & Restore</option>
<option value="23">Deep Stretch/YIN</option>
<option value="154">Express Power</option>
<option value="140">HIIT Power Yoga</option>
<option value="12">Music & Power Yoga</option>
<option value="5">Power Yoga </option>
<option value="46">Power Yoga/Restore </option>
<option value="138">Simply Stretch</option>
<option value="30">Tween Yoga</option>
<option value="139">YOD (Yoga + HIIT)</option></select>
</div>
HTML & JS FOR BUTTON TO CHANGE THE SELECTION:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn3").click(function(){
$("#mbo_class").val("3");
});
});
</script>
<button id="btn3">Set Value</button>
I'm thinking a working solution might be somehow capturing what the dropdown is changed to and then reloading the page, but my attempts have not worked thus far. Here's my latest attempt:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn3").click(function(){
$("#mbo_class").val("3");
});
var selectedProduct = sessionStorage.getItem("product");
if(selectedProduct != undefined || selectedProduct != null){
$("mbo_class").first().find(":selected").removeAttr("selected");
$("mbo_class").find("option").each(function () {
if ($(this).val() == selectedProduct) {
$(this).attr("selected", true);
}
});
}
$('mbo_class').change(function () {
sessionStorage.setItem("product", $("mbo_class").first().val());
location.reload();
});
</script>
<button id="btn3">Set Value</button>
So I found a solution! It isn't quite the direction I was planning to go, but it works! Since I can't actually change the HTML of the widget–the research I was doing led me to a lot of dead ends.
In the HealCode widget app, I created a version of the schedule widget for each class type (the filter options mentioned above).
Then I set the button to change the entire div id to display the correlated schedule widget. (Rather than just filtering the current schedule widget.)
We'll use the example of filtering for the "Basics Class".
Here's my HTML code:
<div id="widget-container">
<healcode-widget data-type="schedules" data-widget-partner="object" data-widget-id="3c106917a43" data-widget-version="0">
</healcode-widget>
<a id="schedule-basics" class="button">Basics schedule</a>
Here's the script–which changes the schedule displayed to the "Basics Class" schedule (much like the filter selection would):
$(document).ready(function() {
var scheduleWidgetMarkup = '<healcode-widget data-type="schedules" data-widget-partner="object" data-widget-id="3c1218147a43" data-widget-version="1" ></healcode-widget>';
$('body').on('click', '#schedule-basics', function(e) {
e.preventDefault();
$('#widget-container').html(scheduleWidgetMarkup);
});
});
I have an Applescript that logs me into bufferapp.com.
I want it to also set the times for my scheduled posts.
I can get it to this page, but then I'm stuck.
Since the class is "chzn-select", I can't get by class name and set value that way.
I'm an absolute novice, so please forgive my ignorance.
Here is the html (direct link - http://cl.ly/image/2G283Z1T2E0F/Screenshot_2014-04-21_17_06_20.png) for the page showing one of the drop-downs.
<form>
<p>Post at <span class="timescount">this time</span> <strong class="name">Every Day</strong> : </p>
<ol id="schedule-times">
<li data-index="0">
<i class="ss-icon">⏲</i>
<select name="hour" class="chzn-select" ,="" style="width: 60px">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
Applescript
tell application "Safari"
do JavaScript " $('.chzn-select option:selected').val('03');" in current tab of window 1
end tell
The following code changed the values (finally), but I'm not sure how or why.
tell application "Safari"
do JavaScript " $('select option:nth-child(1)').attr('selected', 'selected');
$('select option:nth-child(2)').attr('selected', 'selected');
$('select option:nth-child(3)').attr('selected', 'selected');
$('select').trigger('liszt:updated');" in current tab of window 1
end tell
When I run this, all of my "hour" dropdowns change to '3' and all of the "minute" dropdowns change to '2'
You can get the value of selected options in jQuery by adding a value attribute to the HTML:
<option value="some-value">
And the jQuery to get that value would be:
$('select option:selected').val();
Or you can SET the value in very much the same way. The HTML:
<option value="">
The jQuery to SET the value:
$('select option:selected').val('some-value');
Hope that helps.
UPDATE** I don't know anything about Applescript, but here is some updated HTML and JavaScript you can use to get either the value of the selected option, get the text of the selected option, or set the value of the selected option:
<div>
<form>
<select id="sel" class="chzn-select">
<option>Please Select</option>
<option value="a">First Choice</option>
<option value="b">Second Choice</option>
<option value="c">Third Choice</option>
<option value="d">Fourth Choice</option>
</select>
<input id="valueButton" type="button" value="GET VALUE">
<input id="textButton" type="button" value="GET TEXT">
<input id="setValue" type="button" value="SET VALUE">
</form>
</div>
The JavaScript:
document.getElementById('valueButton').onclick = function(){
var e = document.getElementById("sel");
var val = e.options[e.selectedIndex].value;
alert(val);
}
document.getElementById('textButton').onclick = function(){
var e = document.getElementById("sel");
var text = e.options[e.selectedIndex].text;
alert(text);
}
document.getElementById('setValue').onclick = function(){
var e = document.getElementById('sel');
var sel = e.options[e.selectedIndex];
sel.value = "03";
alert(sel.value);
}
A fiddle to show that the JS works (if these functions do not work for you in your own project it means that you've likely got the syntax wrong, or that there is some compatibility issue with Applescript): http://jsfiddle.net/YPfcr/
You can see that the SET VALUE button is working by making a choice, clicking "GET VALUE", then clicking "SET VALUE" on that same selection, then clicking "GET VALUE" again. You'll see that it has changed to "03".
If you can't get this to work for you, it's probably best ask a new question specific to Applescript.
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.