I'm using a selectbox on a Bootstrap platform to list multiple country flags that can be selected. On select the URL should be changed to the page of the country.
However, since I am not using <option> values, I don't know how to accomplish this. When I do work with <option> the flags won't display as shown below. Does anyone know how to add on select for this function?
<div class="bfh-selectbox bfh-countries pull-left" data-flags="true" data-country="NL" data-flags="true" data-blank="false" data-available="NL,BE">
</div>
Got it.
$(document).ready(function(){
$('.bfh-selectbox').on('change.bfhselectbox', function () {
if($(this).val()=="something"){
window.location.href="http://www.somelink.com";
}
else if($(this).val()=="somethingelse"){
window.location.href="http://www.someotherlink.com";
}
else {
}
});
});
Related
i am trying to control a set of drop-down menus,by changing the first menu then all the others will have the first menu selected item as selected.
In my example,what i want to achieve is : when changing the selected value of the 'select for All' then the rest should be set to that value.
i hope i made it clear.
thanks in advance.
Check the below screenshot:
UPDATED!!!! Try this link DEMO
$("#sortedby").change(function () {
$("select").val($(this).val());
});
UPDATED!!!!
Here's an example of a jQuery implementation (change your selectors accordingly):
$(function() {
$('select.select-all').change(function() {
$('select', $(this).closest('tr')).val(this.value);
});
});
I am generating the drop down dynamically by script (Smarty).
If the drop down has just one option value, is it possible to display it as a label.
This will display a drop down with 3 values.
<select>
<option> 1 </option>
<option> 2 </option>
<option> 3 </option>
</select>
If it shows just one value then display it as label, is it possible with pure HTML or Jquery or combination of both? I could use smarty to check for the values and throw different different html, but that would make my code long as I have many drop downs.
<select>
<option> 1 </option>
</select>
Any simple logic, which I might be missing?
UPDATE (RESOLVED)
Thank for all the stackoverflow'ers who helped.
I used the code given by #ahren which worked as required.
However I have expanded the code to copy the attributes of one tag to another, in case if someone is looking for
// To replace a <select>, with <label> tag if it has just one value
$('select').each(function(){
if($(this).find('option').length === 1){
// Copy all attributes from a given tag and save it in a variable.
var attributes_from = $(this).prop("attributes");
var attributes_to = '';
$.each(attributes_from, function() {
attributes_to += ' '+this.name+'="'+this.value+'"';
});
// If select then copy its value from option.
attributes_to += ' value="'+$(this).find('option').attr('value')+'"';
// Replace the <tag>
$(this).replaceWith(function(){
return $('<label '+attributes_to+' />').html($(this).text());
});
}
});
$('select').each(function(){
if($(this).find('option').length === 1){
$(this).replaceWith(function(){
return $('<label />').html($(this).text());
});
}
});
After you've generated your dropdowns, you can just run this snippet to check each of the select elements.
DEMO: http://jsfiddle.net/kqunE/
I'd iterate over each of the <select> elements, checking the number of options they have, and make the required DOM changes accordingly:
$('select').each(function(index, select) {
var numOptions = $('option', this).length;
if(numOptions === 1) {
// replace the select element here - something like the below
var label = $('<label>').html(this.value);
$(this).after(label).hide();
}
});
I opted to hide, rather than replace, the <select> element so you still get the value sent back as part of the form. If that's not required then you can remove the element entirely using .remove() in place of .hide().
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
display dropdown values based on previous dropdown
I know html pretty well and about forms a little bit, but would like to know, for example:
when clicking on a certain drop down list item, a certain second drop down list appears based on the previous field choice. how would you go about incorporating this, is there a specific website I can go to?
an example of code would be appreciated. I am assuming that you could use javascript for this?
do you retrieve specific values or just use different drop down lists for specific choices
Thanks
of the top of my head.
You would handle your javascript on the page, before you submit your form.
step 1. reference jquery in your header
step 2. on load, hide the second select, put this script beneath you reference jquery
<script type="text/javascript">
$(function () {
$("#secondselect").hide()
$("#firstselect").change(function () {
if($(this).val() != 0){
$("#secondselect").show()
}
else
{
$("#secondselect").hide()
}
});
});
</script>
<select id="firstselect" name="firstselect" >
<option value="0">first</option>
<option value="1">second</option>
<option value="2">third</option>
<option value="3"></option>
</select>
<select id="secondselect" name="secondselect">
<option value="0">first</option>
<option value="1">second</option>
<option value="2">third</option>
<option value="3"></option>
</select>
Of the top of my head... but i'd do it something like that.
Good luck.
Oh... just a quick update.
You could use a switch instead of an if like so, might be a bit tidier...
FROM
if($(this).val() != 0){
$("#secondselect").show()
}
else
{
$("#secondselect").hide()
}
TO
switch($(this).val())
{
case '1':
$("#secondselect").show();
break;
case '1':
//do something else... show a third dropdown instead
//for instance...
// $("#thirdselect").show();
alert('got to case 1');
//or if you use firebug or chrome, right click and inspect an element then click on Console and this log report should show
console.log('got here, showing the log');
break;
default:
$("#secondselect").hide();
}
I assume from your question that you want to dynamically populate the second dropdown based on the selected value of the first one.
To do that you can use jQuery to get the value of the first selected value pass it to a PHP file to get a response of the options that the second drop down needs to have and populate them.
You can use .show() and .hide() also to hide or show the dropdown when is needed.
$('#first').change(function(){
var selected= $('#first').val();
$.getJSON('data.php',{name: selected},function(data){
var results='';
$.each(data, function(i, item) {
results += '<option value="'+item.Description+'">'+item.Description+'</option>"' ;
});
$("select#Second").html(results);
})
});
If the options do not need to dynamically change and you just need to hide and show then you can use the simpsons88 answer!
I have a select element in the form with different options. On property of the 'select' is onchange="testRecurrence(this.form)" and the js function it's just:
function testRecurrence(form) {
if(form.repeat.value != "N") {
form.endR.style.display = 'inline';
}
return true;
}
Being 'repeat' the select and 'endR' the item I want to display in case the option value is not "N". The issue here is that this is not working... been trying to find a solution but not able. Any help?
update
Not working, the element stay always hidden. The element endR by default has display:none.
update2
js function changed to:
function testRecurrence(form) {
if(form.repeat.options[form.repeat.selectedIndex].value != 'N')
document.getElementById('endR').style.display = 'inline';
}
html:
<select name="repeat" onchange="testRecurrence(this.form)">
...
<div id="endR" style="display: none">
...
</div>
It works now. Thank you.
I think getting the value of a select element doesn't work on all browsers, but this should do:
form.repeat.options[form.repeat.selectedIndex].value
I'll try to explain:
I have numerous div classes, but for the sake of simplicity, let's say I only have 3.
Someone is viewing DIV 1, and I want to give them the option of only printing DIV 1, omitting 2 and 3.
However, on the same page, I would like to give them the option to ONLY PRINT DIV 2. Or only print DIV 3.
I think I get how you can omit certain things from getting printed. But how can you select a section here or there on the same page to be printed with a print link.
Thanks,
Tracy
You can use jQuery to show/hide divs. Read the jQuery tutorial:
http://docs.jquery.com/Tutorials
The code will look this way:
<script>
function showDiv(n) {
$('.divs').hide();
$('#div_'+n).show();
}
$(document).ready(function() { showDiv(1); });
</script>
<a href='javascript:showDiv(n)'>show div n</a>
<div class='divs' id='div_n'>I'm div n</div>
There are many related posts on printing div content, this particular question was still open though it was asked in '10.. Following JavaScript function can be used for printing content of a selected Div tag. Hope this helps. Declaimer: I used some of the existing answers, fixed/enhanced code/error(s) to work with (and tested on) IE-8.
function printDiv(divName) {
var divToPrint = document.getElementById(divName);
var newWin = window.open('', 'PrintWindow', 'width=400, height=400, top=100, left=100', '');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
newWin.document.close();
setTimeout(function () { newWin.close(); }, 10);
}
Call printDiv from anywhere in page or from within selected Div. Here is test link:
Print Customer Data
Print Order Data
Assign respective IDs to Div that is to be printed:
<div id="divCustomerData">Div Contents goes here... </div>
The only catch right now is it loses css styles. I'll update response when i get a chance to fix it. Thanks.
https://github.com/jasonday/jquery.printThis
I would give each div an id, and then using the above plugin (i wrote) specify according to div id.