how to set scroll function on select box - javascript

I want to set scroll function on select box so that whenever i scroll , an alert will be there . i am not able to set that .scroll function of jquery on select. Please tell me how to set it. May be i am doing some mistake in my code.
Code:
<div class="dropdown col-xs-4">
<input list="d1" id="search" name="d1" class="form-control input-xs" placeholder="Search by">
<!-- <datalist id="d1"> -->
<select id="d1">
{{#each data1}}
<option class="form-control" > {{TradeName}} </option>
{{/each}}
</select>
<!-- </datalist> -->
</div>
Js file:
$( "#d1" ).scroll(function() {
console.log("Scrolling");
});

document.getElementById("d1").addEventListener("scroll", scroll);
function scroll() {
document.getElementById("demo").innerHTML = "Scrolled";
}
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div>
<select id="d1" onmousedown="if(this.options.length>5){this.size=5;}" >
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<option>e</option>
<option>f</option>
<option>g</option>
<option>h</option>
</select>
</div>
<p id="demo"></p>
</body>
</html>
I just edited the code. As work around you can try this. The text will get display when you do scroll down. This is not such a good approach but for the time being you can use this.

Related

combobox not refresh on value change

on page init I have following render of combobox element
<div class="combobox-container">
<input type="hidden" name="MySelection" value="">
<div class="input-group">
<input class="combobox form-control" type="text" autocomplete="off" placeholder="Select">
<ul class="typeahead typeahead-long dropdown-menu">
<li class="" data-value="val1">
<li class="active" data-value="val2">
<li data-value="val3">
<li data-value="val4">
<li data-value="val5">
</ul>
<span class="input-group-addon dropdown-toggle" data-dropdown="dropdown">
<span class="caret"></span>
<span class="glyphicon glyphicon-remove"></span>
</span>
</div>
</div>
which renders combo like
after I select option from this combo I'm geting rendered like
now after certain users action I'm resetting combo box on it's default state so I use following code
$('#MySelection').val(undefined);
this actually change value as I expected but ui elemenent stays intact, it appears
and I want to appear as
I tried with $('#MySelection').data('combobox').refresh();
but that doesn't helped.
Update:
As someone suggested I tried with moving $('#MySelection').data('combobox').refresh();
at the end of the file since I'm getting error inside firebug
TypeError: $(...).data(...) is undefined').data('combobox').refresh();
but it doesnt help. I try even to put at the of the _Layout.cshtml file after all jquery init files but also without any progress.
UPDATED: try this:
bootstrap-combobox:
$('#MySelection').val('');
$('#MySelection').data('combobox','refresh');
$(document).ready(function(){
$('.combobox').combobox()
$("#reset").on("click",function(){
$('.combobox').val('');
$('.combobox').data('combobox','refresh');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://formvalidation.io/vendor/bootstrap-combobox/js/bootstrap-combobox.js" type="text/javascript"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="http://formvalidation.io/vendor/bootstrap-combobox/css/bootstrap-combobox.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Vertical Form</h1>
<div class="form-group">
<label>Turns this</label>
<select class="combobox input-large form-control">
<option value="">Select a State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
</select>
</div>
<button id="reset">Reset</button>
This works for me:
$('#MySelection').val('');
$('#MySelection').data("combobox").clearElement();
$('#MySelection').data('combobox').refresh();
Use Below Code to set selected index 0
$('#MySelection').prop('selectedindex',0);
Your element <input type="hidden" name="MySelection" value="">has the name MySelection.
With your $('#MySelection').val(undefined); you're trying to call it by it's ID (not name).
Try $('input[name=MySelection]') instead.
After much searching, I found #mikeblum's solution to work for me.
$('#element').data('combobox').clearTarget();
$('#element').data('combobox').clearElement();

Showing 2nd Dropdown based on First drop down not working

I am a newbie learning web development. I am trying to create a simple form with two dropdowns. Based on first drop down second dropn down should be visible.
But it is not working :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="container">
<div class="box">
<form>
<div class="ccms_form_element cfdiv_custom">
<div class="col-md-4">
<label for="inputType">Input Type</label></div>
<div class="col-md-8" style="font-size:16pt;">
<select id="inputType" required name="inputType" style="width:500px" onChange="ChangeDropdowns();">
<option value="">Select Type : Type Of You Want to Process</option>
<option value="text">Text </option>
<option value="genome">Numbers</option>
<option value="chacha">Special Characters</option>
</select>
</div>
</div>
</div>
<div class="style-sub-1" id="dataType" style="display: none;" >
<div class="col-md-4">
<label for="inputType">Data Type</label></div>
<div class="col-md-8" style="font-size:16pt;">
<select id="data" required name="data" style="width:500px">
<option value="">Select Data Source : Where is your Data?</option>
<option value="text">Data is already in Server</option>
<option value="genome">Need to Upload the File</option>
</select>
</div>
</div>
<div class="row">
<script>
function ChangeDropdowns() {
$(".style-sub-1").show();
}
</script>
</body>
</html>
Can someone tell me what I am doing wrong here ?
It looks like you are trying to use jquery (the $ in your javascript code).
However, you haven't specified the jquery script in your html.
Try adding this
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
In between the head blocks
Use the following, using JQuery to detect the change in first select - and include JQuery as Scott said
$( document ).ready(function() {
$("#inputType").on('change', function (){
$(".style-sub-1").show();
});
});

jQuery .next() next not working when inside div

After seeing my questions replied here and with success, the problems appeared when transposing to my script:
I have a dropdown that is being cloned which shows it's value on a side div. The problem is that when I clone it, the dropdown below don't work and the first updates all the remaining. Code:
Add
<div class="row">
<div class="products-row">
<div class="col-xs-12 nopadding">
<div class="col-xs-2">
<input type="text" id="number1" class="form-control" value="1" />
</div>
<!-- if i remove the div below and leave only the select, it works -->
<div class="col-xs-6" >
<select name="total-checkout" id="name" class="form-control product-name select" >
<option value="25" >A</option>
<option value="50" >B</option>
<option value="75" >C</option>
</select>
</div>
<div class="col-xs-2">
<div class="tags">25</div>
</div>
</div>
</div>
</div>
jQuery:
var count = 0;
$('#add-more').click(function(){
var id = $(".row:last").attr('id');
var appendDiv = $($(".products-row:last")[0].outerHTML);
appendDiv.attr('id', ++id).insertAfter(".products-row:last");
});
$('#name').change(function(event) {
$('.tags').html($('#name').val());
});
$(document).on('change', '.select', function() {
$(this).next(this).html($(this).val());
});
Working jsFiddle:
http://jsfiddle.net/QuadDamage/p843nc9j/
If I remove the <div class="col-xs-6"> from around the <select> the output will appear not formatted but correctly updating the div.
Thanks in advance.
It seems to me that you're targeting .col-xs-2 .tags if this is the case you need this code
$(this).parent().next().find('.tags').html($(this).val());

Remove all other div's on click of a image

<label>Project Type </label>
<div>
<select name="category" id="category" class="form-control ">
<option value="">Select Project Type</option>
<option value="Independent_House">Independent House</option>
<option value="Duplex_House">Duplex House</option>
<option value="Pent_House">Pent House</option>
</select>
</div>
<div class="cato" id="category_Independent_House" style="display:none">
<input type="button" id="addindependant" value="Add Property" />
<div id="cato_Independent_House">
<div class="form-group">
<label>Bed Rooms</label><label>Bath Rooms</label>
</div>
</div>
</div>
<div class="cato" id="category_Duplex_House" style="display:none">
<input type="button" id="addduplex" value="Add Property" />
<div id="cato_Duplex_House">
<div class="form-group">
<label >Bed Rooms</label><label>Bath Rooms</label>
</div>
</div>
</div>
<div class="cato" id="category_Pent_House" style="display:none">
<input type="button" id="addpenthouse value="Add Property" />
<div id="cato_Pent_House">
<div class="form-group">
<label >Bed Rooms</label><label>Bath Rooms</label>
</div>
</div>
</div>
<script type="text/javascript">
js(function() {
js('#addindependant').click(function(e){
js('#cato_Independent_House').append('<div class="form-group submenu">
<div ><select name="rooms[]" >
<option value="1">1BHK</option>
<option value="2">2BHK</option>
<option value="3">3BHK</option>
</select>
</div>
<div><select name="toilets[]">
<option value="1">1T</option>
<option value="2">2T</option>
<option value="3">3T</option>
</select>
</div>
</div>');
});
js('#addduplex').click(function(e){
js('#cato_Duplex_House').append('<div class="form-group submenu">
<div ><select name="rooms[]" >
<option value="1">1BHK</option>
<option value="2">2BHK</option>
<option value="3">3BHK</option>
</select>
</div>
<div><select name="toilets[]">
<option value="1">1T</option>
<option value="2">2T</option>
<option value="3">3T</option>
</select>
</div>
</div>');
});
js('#addpenthouse').click(function(e){
js('#category_Pent_House').append('<div class="form-group submenu">
<div ><select name="rooms[]" >
<option value="1">1BHK</option>
<option value="2">2BHK</option>
<option value="3">3BHK</option>
</select>
</div>
<div><select name="toilets[]">
<option value="1">1T</option>
<option value="2">2T</option>
<option value="3">3T</option>
</select>
</div>
</div>');
});
});
js(document).ready(function(){
js('#category').change(function () {
var selection = js(this).val();
js('#category_'+selection).show('slow');
});
});
</script>
This is my code. When I select the category based upon the category selected the divs cato_Independent_House cato_Duplex_House and category_Pent_House get appended to their respective categories.
Consider first independant house is selected from drop down so its respective cato_Independent_House gets appended to the div with id id="category_Independent_House" on click of the button.after that when duplex house is selected from drop down its respective 'cato_Duplex_House' gets appended to div with id="cato_Duplex_House" on click of the button.
But when I go back and select Independant house it must not show previous selected div until the button is clicked. But here the div is already been displayed even the button is not clicked when I go back.The previous menu should show its div only when the button is clicked.i.e, the previous divs must get empty or removed when other option is selected.How to do this?
js
js(document).ready(function(){
js('#category').change(function () {
var selection = js(this).val();
js('.cato').each(function() {
console.log(js('.cato'));
if(js(this).attr('data-visible') != "true") {
js(this).hide();
}
});
js('#category_'+selection).show('slow');
});
js('.addProperty').click(function(){
js(this).parents('.cato').attr('data-visible','true');
});
});
html
<input type="button" id="addduplex" value="Add Property" class="addProperty" />
add class addProperty to all your add property input
Working JsFiddle Link. I guess this is what you wanted
You should use the jquery hide method to hide the others divs depending on wich one you have selected:
js(document).ready(function(){
js('#category').change(function () {
var selection = js(this).val();
js('#category_'+selection).show('slow');
if(selection=="Independent_House"){
js('#cato_Duplex_House').hide();
js('#cato_Pent_House').hide();
}else if(...){
{otherCases}
});});
And if you want to clear also the inputs selection of each div you could do something like this:
js("#input_controller_id_to_clear")[0].selectedIndex = -1;

Related Radio buttons and Drop down list

i am trying to make a form, in which i have a number of radio buttons (created dynamically), and a drop down list.
In the drop down list i have numbers.
I want the drop down list to depend on the radio button currently pressed, meaning that, if i press the first button, the maximum number appearing in the drop down list will be a value x, if i press another radio will be a value y. This values represent a php variable.
What is the easiest way to do this thing?
Thank you!
Editing:
i tried:
<html>
<head>
<style>
#ca {
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("input:radio").click(function() {
$('.searchSelect').hide();
$('#' + $(this).attr("value")).show();
});
});
</script>
</head>
<body>
<ul id="countrylist">
<li>
<label for="US-country">
<input name="store" id="US-country" type="radio" value="com" checked="checked" />
USA</label>
</li>
<li>
<label for="CA-country">
<input name="store" id="CA-country" type="radio" value="ca"/>
Canada</label>
</li>
</ul>
<select name="search-alias-us" id="com" class="searchSelect" title="Search in">
<option value="aps" selected="selected">All Departments</option>
<option value="apparel">Apparel & Accessories</option>
<option value="automotive">Automotive</option>
</select>
<select name="search-alias-ca" id="ca" class="searchSelect" title="Search in">
<option value="aps" selected="selected">All Departments</option>
<option value="stripbooks">Books</option>
<option value="popular">Music</option>
</select>
</body>
</html>
also included : the jquery 1.5 library . still, the drop down list does't change on radio button click.
thank you!
I'm not sure if I understand your question right but I once made something similar, what I did was output all dropdownlists and hid them with css then on clicking the radiobutton unhid the dropdownlist I needed using jquery
http://jsfiddle.net/6svcD/
It can be even shorter with show() and hide()
$(function() {
$("input:radio").click(function () {
$('.searchSelect').hide();
$('#' + $(this).attr("value")).show();
});
});
The whole page below or here: http://jsfiddle.net/MrAGF/1/
<html>
<head>
<style>
#ca {
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("input:radio").click(function() {
$('.searchSelect').hide();
$('#' + $(this).attr("value")).show();
});
});
</script>
</head>
<body>
<ul id="countrylist">
<li>
<label for="US-country">
<input name="store" id="US-country" type="radio" value="com" checked="checked" />
USA</label>
</li>
<li>
<label for="CA-country">
<input name="store" id="CA-country" type="radio" value="ca"/>
Canada</label>
</li>
</ul>
<select name="search-alias-us" id="com" class="searchSelect" title="Search in">
<option value="aps" selected="selected">All Departments</option>
<option value="apparel">Apparel & Accessories</option>
<option value="automotive">Automotive</option>
</select>
<select name="search-alias-ca" id="ca" class="searchSelect" title="Search in">
<option value="aps" selected="selected">All Departments</option>
<option value="stripbooks">Books</option>
<option value="popular">Music</option>
</select>
</body>
</html>

Categories