i wonder how can it show a list of result after the input, and after click the list result, it display on the input text, and can use with mutiple topic.
Are there any js library could implement this easily?
can anybody show some code sample to implement such feature?
Try this: https://select2.github.io/examples.html#multiple
<script type="text/javascript">
$(".js-example-basic-multiple").select2();
</script>
<select class="js-example-basic-multiple" multiple="multiple">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
Related
I'm adding the following drop down to my page and I it's styled differently because of the fact that it's from an external javascript library.
<input type="hidden" name="country" id="countryId" value="US"/>
<select name="state" class="states order-alpha" id="stateId">
<option value="">Select State</option>
</select>
<select name="city" class="cities order-alpha" id="cityId">
<option value="">Select City</option>
</select>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//geodata.solutions/includes/statecity.js"></script>
It doesn't use the standard bootstrap style (it looks pretty old school). Any way I can style this using bootstrap?
As you can tell, I'm still new to this.
I don't have enough reputation to put a comment, so I'll post an answer.
If you're not comfortable with writing your own code (yet)
You can customize your bootstrap look here and download it after.
On the other hand
You should probably look for some beginner tutorials on CSS and HTML. :)
this is the select.
<select name='select_name'>
<option value='1'>one</option>
<option value='2'>tow</option>
<option value='3'>three</option>
<option value='4'>fore</option>
//here i have more then 300 select which i will fetch from database
</select>
i want to change it input so when i write the first later it fetch me the match items and so on if the secound later it match as i write. if is possible please write me hint so i could save my time.
for example if i write (t) it will show me
tow
three
regards
You're looking for a combo box. If you don't want to write it from scratch, you could use a plugin instead.
In this example is Select2 Plugin:
Example:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<select name='select_name' style="width:300px">
<option value='1'>one</option>
<option value='2'>two</option>
<option value='3'>three</option>
<option value='4'>four</option>
<option value='5'>five</option>
</select>
<script type="text/javascript">
$(document).ready(function(){
$('select[name="select_name"]').select2();
});
</script>
Demo
I'm trying to use this selectpicker for form selects and options, but can't get it to work.
I've added the following scripts and css as specified:
<script type="text/javascript">
$('.selectpicker').selectpicker({
});
</script>
<script src="/js/Bootstrap/Select/bootstrap-select.js"></script>
html for the 1st greyed out select in the search bar:
<select class="selectpicker" id="searchType" name="searchtype" onchange="this.form.submit()">
<option value="All">All</option>
<option value="Businesses">Businesses</option>
<option value="Events">Events</option>
<option value="News">News</option>
<option value="Lifestyle">Lifestyle</option>
</select>
Any ideas appreciated.
Please be sure that you included all the required files or You may have to rearrange the code like :
<script src="/js/Bootstrap/Select/bootstrap-select.js"></script>
<script type="text/javascript">
$('.selectpicker').selectpicker({
});
</script>
You need to include the js first then call the the plugin. Check this fiddle, its working for me : http://jsfiddle.net/tejashsoni111/RUAS4/
.selectpicker() is a function defined under bootstrap-select lib and not in core bootstrap library,hence you need to include that library as well
//silviomoreto.github.io/bootstrap-select/javascripts/bootstrap-select.js
//silviomoreto.github.io/bootstrap-select/stylesheets/bootstrap-select.css
HTML:
<select class="selectpicker" id="searchType" name="searchtype" onchange="this.form.submit()">
<option value="All">All</option>
<option value="Businesses">Businesses</option>
<option value="Events">Events</option>
<option value="News">News</option>
<option value="Lifestyle">Lifestyle</option>
</select>
JQUERY CODE:
$('.selectpicker').selectpicker();
Here is a Live Demo of select picker function :
http://jsfiddle.net/dreamweiver/2a9xp/13/
Happy Coding :)
In case anyone using Rails is experiencing a similar problem - the issue was arising from the existence of the precompiled assets for the AWS deployment that were lingering in my local environment.
Deleting YourRailsApp/public/assets solved the issue for me.
I have two drop down lists on my ASP.NET MVC 3. When one of the drop down lists is set to "Sole Proprietor", the other needs to be set to the same.
I'm sure the JavaScript, or jQuery, is very simple for something like this, however I am having a hard time finding a good example on the web since I am populating the drop down lists manually instead of through the controller.
Can someone either help me out with the code or point me to a good resource?
<select id="ProducerType" name="nmf" style="float:left;">
<option value="Principal">Principal</option>
<option value="Producer">Producer</option>
<option value="SoleProprietor">Sole Proprietor</option>
</select>
<select id="Role" name="nmf" style="float:left;">
<option value="Agent">Agent</option>
<option value="Financial Advisor">Financial Advisor</option>
<option value="Platform">Platform</option>
<option value="Principla_Owner">Principal/Owner</option>
<option value="Registered Rep">Registered Rep</option>
<option value="Sole Proprietor">Sole Proprietor</option>
</select>
jsFiddle example : http://jsfiddle.net/9GZQ2/
I set both dropdown values to "Sole Proprietor" your code has the space missing in the ProducerType select
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script type="text/javascript">
$(function(){
$("#ProducerType").change(function(){
var value=$(this).val();
if(value=="Sole Proprietor") $("#Role").val(value);
});
$("#Role").change(function(){
var value=$(this).val();
if(value=="Sole Proprietor") $("#ProducerType").val(value);
});
});
</script>
Here is the issue.
I have a select dropdown list.
<select name="listingtype" id="speedD" style="width:210px;">
<option>For Sale</option>
<option>For Rent</option>
</select>
And another select drop down list where the prices appear , which on page load it is empty..
So if user clicks For Sale: then the other select drop down list, loads price list like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
<option value="250000">$250,000</option>
And if they choose For Rent. Select drop down is propagated like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="100">$100</option>
<option value="150">$150</option>
<option value="200">$200</option>
<option value="250">$250</option>
<option value="300">$300</option>
</select>
I need this code to be client side, no need for server side. And just wanted to know what the cleanest method for doing this is.
Cheers.
First of all I recommend setting the value attribute in your option elements.
Example:
<option value="sale">For sale</option>
<option value="rent">For rent</option>
If you have not already heard of or seen the JavaScript library known as jQuery I strongly recommend checking it out! It can be very helpful when creating a dynamic site like this using minimal JavaScript.
I would do something like the following:
<html>
...
<body>
<div id="fillme"></div>
<script type="text/javascript">
if (document.yourformname.listingtype.value == "sale") {
//it is for sale
$('#fillme').html('<select name="valueA" id="speedF" style="width:200px;"><option value="Any" selected="selected">Any</option><option value="50000">$50,000</option><option value="100000">$100,000</option><option value="150000">$150,000</option><option value="200000">$200,000</option><option value="250000">$250,000</option></select>');
} else {
//fill it with the other elements
}
</script>
</body>
</html>
Now of course you could load it more dynamically with JSON or XML but that is up to you. I really recommend checking out the library:
http://jQuery.com
Use JavaScript to fill the empty select with options when the user selects an option (either onchange or onselect, forget which) in the For Sale/For Rent select.
EDIT: More specifically, have that second box be empty when the page loads. Store the options in arrays. Use a loop to create new OPTION elements based on each array item.