I have a user input form with multiple drop downs that display based on user selection. When a user selects an option from the 2nd drop down I would like to append that selection to a url.
Here's what I am working with: http://jsfiddle.net/Sxz4R/142/
Here's the JS in question:
function changeText2(){
var userInput = document.getElementById('userInput').value;
var lnk = document.getElementById('lnk');
lnk.href = "http://google.com/?q=" + encodeURIComponent(userInput);
lnk.innerHTML = lnk.href;
The issue is once the link is set it will not change again if a different option is selected from the first drop down menu.
Repro:
1) Select List of Colors
2) Select a color -- Link will change
Without refreshing...
1) Select "List of Numbers" from drop down
2) Select a number -- Link does not change
How do I get the link to change if the user decides to select a new option from the first menu?
IDs are unique but you're using the same one twice - that's a no-no. Use a class for it instead. You should also get rid of those HTML binds with javascript:.
Here's an updated fiddle.
Related
I have attached a JS Fiddle link here:
http://jsfiddle.net/p0b4j5o8/18/
If you check the fiddle link, you will see that I have written JavaScript/jQuery code (a function named add_mitigator()) in the HTML section.
When I used to write the code in the JavaScript section, Firebug used to trigger an error stating function add_mitigator() isn't defined.
But when I wrote the same in the HTML section instead, it runs with no problem. I am not much accustomed with JS Fiddle. How can I write a function in function_name() format in the fiddle?
In my JS Fiddle, there is a dropdown (chosen multiple) with options 1 to 10. When I click on the add_mitigator link, it creates/appends a new chosen dropdown.
Suppose I have three dropdowns, then if I select 2 from dropdown 1, then the other dropdowns will have 2 removed from their options. When I will unselect the 2 from the first dropdown, then 2 will again be available in the other two dropdowns. This should act vice-versa. When 2 is selected from any dropdown, then it is unavailable for all other dropdowns.
How can I achieve this?
By calling the function below on the select box change event the options will be disabled/enabled as per your requirements.
function disableSelectedValues() {
var cssOptions = [];
$(".input_field.criteria_countries option").removeAttr("disabled");
$.each($(".input_field.criteria_countries"), function(index, select) {
cssOptions = [];
var values = $(select).val();
if (values) {
for (var i = 0; i < values.length; i++) {
cssOptions.push("option[value=" + values[i] + "]");
}
}
console.log("test");
if (cssOptions.length) {
// disable all options with the selected values
$(".input_field.criteria_countries "
+ cssOptions.join(",.input_field.criteria_countries ")).attr("disabled", true);
// enable all options with the selected values for the current select
$(select).find(cssOptions.join()).removeAttr("disabled");
}
});
}
With .chosen you can listen to onchange events with .chosen().change();.
In the .chosen().change() event you then need to tell all of the select boxes to update once a value has changed. By using .trigger("chosen:updated"); on the select box selectors whenever a change event is fired, the select boxes will update.
NOTE that you will need to call the disableSelectedValues() function whenever you add a select box to have its options disabled on creation.
http://jsfiddle.net/p0b4j5o8/22/
I'm stuck right now on the following problem:
I have 2 dropdown menus next to each other, that both offer the same options to choose from (users can choose their travel route by choosing their point of departure and their destination).
The items on these dropdown menus are taken from a table in my database.
I want to achieve the following:
Locations "A", "B" and "C" are choosable as start or destination. When a user chooses "B" as point of departure (in the 1st dropdown menu), this option should not be shown anymore in the 2nd dropdown menu (destination). (EDIT: But it should reappear, when another option is selected in the 1st dropdown)
Same with "A" and "C" of course.
The code I use right now to fill the dropdown menus is:
<select name="anfang">
<?php
$sql = "SELECT * FROM orte";
$result = mysqli_query($dblogin,$sql);
while($zeilestart=mysqli_fetch_array($result))
{
include("includes/database.php");
$ortname=$zeilestart['name'];
$ortkurz=$zeilestart['kurz'];
echo "<option value=\"$ortkurz\">";
echo $ortname;
echo "</option>";
}
?>
</select>
This is the code for the 1st dropdown menu (start), the code for the 2nd menu is pretty much the same.
I assume that some JavaScript-code can solve my problem, but I don't really know how to do it... Can anyone help me? :)
Thanks and kind regards
weheri
The following code should be easy to understand - it basically queries the DOM for the first dropdown list's select element and the second dropdown lists' options elements. It attaches an event handler to the onchange event of the first select, so that whenever its value changes, the handler function is called to check all the options on the second select against the selected value. If the value matches, it sets a disabled attribute on the option, otherwise if the option has a disabled attribute (from a previous selection), it removes it.
You can add this to your page before the closing body tag, changing secondSelect to the name of your second dropdown.
<script>
var select1 = document.querySelector('select[name="anfang"]'),
secondList= document.querySelectorAll('select[name="secondSelect"] option');
select1.onchange = function(){
var selected = this.value;
for(var i=0;i<secondList.length;i++){
if(secondList[i].value==selected)
secondList[i].setAttribute('disabled',true);
else if(secondList[i].getAttribute('disabled'))
secondList[i].removeAttribute('disabled');
}
}
</script>
If you would like to hide the element altogether (instead of disabling it), you can to use the style attribute instead of disabled:
<script>
var select1 = document.querySelector('select[name="anfang"]'),
secondList= document.querySelectorAll('select[name="secondSelect"] option');
select1.onchange = function(){
var selected = this.value;
for(var i=0;i<secondList.length;i++){
if(secondList[i].value==selected)
secondList[i].style.display = "none";
else if(secondList[i].style.display == "none")
secondList[i].removeAttribute('style');
}
}
</script>
I was writing the code when I saw this already have been answered, but here is my contribution (full code example, using a php array to get the data from instead of a mysqli object/array)
http://pastebin.com/0J31FK15
I have a text box that is already showing, but I also have a select box where the user can select a building, and it will show another select box with more options depending on which building the user chose. The second select box always has the option new
My problem is that if the user selects a certain building from the select box, the program has to check if the building has more options besides from the newoption, and if it has, then the text box should disappear, but if the building only has the new option, then the textbox must stay there, and the second select box needs to disappear.
I tried using something like:
if (secondbox.length==1){
secondbox.style.display='none'}
but it works after I changed to another building instead of working instantly.
Javascript:
if (comm.length == 1){
comm.style.display='none';
comm.disabled=true;
comm.value='';
comm.style.visibility='hidden';
textNumber.style.visibility='visible';
textNumber.disabled=false;
textNumber.focus();
textic.style.visibility='hidden';
textic.disabled=true;
textic.value='';
document.getElementById('btnComm').value='Add';}
else {
comm.style.display='';
comm.disabled=false;
comm.style.visibility='visible';
textNumber.style.visibility='hidden';
textNumber.disabled=true;
textNumber.value='';
textic.style.visibility='hidden';
textic.disabled=true;
textic.value='';
document.getElementById('btnComm').value='Update';}
}
Simply do:
if(document.getElementById("selectBoxId").childNodes.length >= 2) {
//The select box has 2 or more options...
}
I'm building off an existing woocommerce wordpress extension, and I'm converting the product variation (size, color etc) dropdown menus into radio boxes. The trickiness is that when a user selects an option from the drop-down list, it triggers something that automatically updates the product inventory and price via ajax.
I used this to convert the inputs into radios (from here):
$('.variations select').each(function(i, select){
var $select = jQuery(select);
$select.find('option').each(function(j, option){
var $option = jQuery(option);
// Create a radio:
var $radio = jQuery('<input type="radio" />');
// Set name and value:
$radio.attr('name', $select.attr('name')).attr('value', $option.val());
// Set checked if the option was selected
if ($option.attr('selected')) $radio.attr('checked', 'checked');
// Insert radio before select box:
$select.before($radio);
$radio.wrap('<div class="vari-option fix" />');
// Insert a label:
$radio.before(
$("<label />").attr('for', $select.attr('name')).text($option.text())
);
});
Then I've used this
$(':radio').click(function(){
$(this).parent().parent().find('label').removeClass('checked');
$(this).siblings('label').addClass('checked');
$choice = $(this).attr('value');
$('.variations select option[value=' + $choice + ']').attr('selected',true);
});
So that when a radio is selected, it mirrors the event on the dropdown option. That works fine, but it's not triggering the refresh of the product info. My guess is there's a difference between changing the 'selected' attribute of a dropdown option and physically clicking on the same option. Any guess at what event might be triggering that ajax function that I'm not taking into account? And a solution that ideally doesn't involve modifying woocommerce's original code? I've tried using .click() on the select option but it made no difference.
Programmatically changing the value of an element doesn't trigger the change event, and I would assume that programmatically setting the selected attribute/property on an <option> also wouldn't trigger the change event on the containing <select> element.
Fortunately, you can easily trigger that event programmatically using jQuery:
$('.variations select option[value=' + $choice + ']').attr('selected',true).parent().trigger('change');
The .parent() call returns a jQuery object containing the <select> element, then .trigger('change') triggers any event handlers bound to the change event on that object.
I am using this script Dynamic Drive Chained Menu and what I am trying to do is when someone clicks the "go" button the values of the selections made display in a text box with a message that says something like "You have selected:"
I've changed the main part, from the alert is up to you :)
function goListGroup(){
var options = [];
for (i=0;i<arguments.length; i++){
if (arguments[i].selectedIndex!=-1){
options.push(arguments[i].options[arguments[i].selectedIndex].value);
}
}
alert(options);
}
Don't forget to set the value attribute on the option element!