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. :)
Related
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>
I have the follow problem guys, i have create a simple page with a ckeckbox, and i want when the checkbox is checked a (list) appearing and if not checked list2 appearing,without using sumbit
<body>
<input type="checkbox1" name="ckeck">
<?php if checkbox1 is ckecked { ?>
<select name="list" size="1">
<option value="0">0</option>
<option value="1">1</option>
</select>
<?php } else { ?>
<select name="list2" size="1">
<option value="12">12</option>
<option value="25">25</option>
</select>
<?php } ?>
</body>
I hope the code help more....
If you want the list to display without using a submit (meaning it appears when you click the checkbox) you need to use Client-Side scripting in a language such as Javascript, instead of PHP. PHP can only control the output that is sent to the client, once it is on the client being displayed in the browser you need a client-side language to make changes.
I highly recommend you use a library to do this as that will take care of a lot of stuff that you would otherwise need to do manually. If you would use the very popular and widespread JQuery library your code could look like
<html >
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
$("#list").hide();
$("#ckeck").change(function() {
if($(this).is(":checked")) {
$("#list").show();
$("#list2").hide();
}
else
{
$("#list").hide();
$("#list2").show();
}
});
});
</script>
<input type="checkbox" name="ckeck" id="ckeck">
<select name="list" id="list" size="1">
<option value="0">0</option>
<option value="1">1</option>
</select>
<select name="list2" id="list2" size="1">
<option value="12">12</option>
<option value="25">25</option>
</select>
</body>
</html>
PHP does not have access to the DOM; you'll need JavaScript for that. If you must use PHP to react to a checkbox, then you'll want to look into using AJAX. Basically you'll use JavaScript (ideally jQuery) to react to the immediate checkbox event, which will use AJAX to communicate with your PHP script. Your PHP script will return some sort of data. The data could be JSON containing the list data (I recommend this one), could be raw JavaScript code to be executed, or it could simply return a boolean that determines whether the list will display or not. Those are just some ideas.
If it's not a security issue, you could just move all the PHP logic to the client-side and do everything in JavaScript. You'll probably have a better user experience and there's potential for less server strain.
tl;dr: Use JS instead. Otherwise use JS to handle checkbox events, AJAX against PHP script, PHP generates data, JS interprets result.
Try using .toogle() like:
$('#checkbox1').change(function() {
$("select[name='list']").toggle(this.checked);
$("select[name='list2']").toggle(!this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="check" id="checkbox1">
<select name="list" size="1" style="display:none">
<option value="0">0</option>
<option value="1">1</option>
</select>
<select name="list2" size="1">
<option value="12">12</option>
<option value="25">25</option>
</select>
See it in action here: http://jsfiddle.net/mk02qmjh/1/
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.
There is built-in autocomplete function as a part of the input element in all major browsers. It usually drops down when user starts typing. Is there a way of controlling the list? I mean something like
<input id="abc" type="text" />
<script>
//this does not work, obviously
var cars=["Saab","Volvo","BMW"];
document.getElementById("abc").autocomplete.list=cars;
</script>
... without using JQuery ... It's probably dream-of feature, isn't it?
Nobody said it is not possible so far :)
As suggested in comments try HTML5's datalist
<input type="text" id="country" list="someCountries" />
<datalist id="someCountries">
<option label="United Stated" value="USA"></option>
<option label="United Kingdom" value="UK"></option>
<option label="Uruguay" value="URU"></option>
<option label="Brazil" value="BRA"></option>
<option label="Russia" value="RUS"></option>
</datalist>
More here
I have a list of select elements:
<select id="id_tags_to" multiple="multiple" size="0" name="tags" class="filtered"></select>
I'd like to somehow either translate the entire list of select elements into text OR, populate a new form (with an input type=text) with the contents of the select elements list as one string of text.
I tried:
<form action="/search/{{search_type}})" method="get">
<input type="text" name="qTag">
<input type="submit" value=" Search Tags">
<select id="id_tags_to" multiple="multiple" size="0" name="tags" class="filtered"></select>
</form>
This did not work in that it not only did not accomplish what I'm trying to do but it also broke the select functionality.
In case its not very obvious, I have no experience with html or javascript or jquery, I'm just trying to get something working with temporary code, so any quick and dirty suggestion would be great.
Hello you could use html5 to achieve that easily, its called a datalist its a new form type in html5 which is very useful hope this helps - Andrew
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
First you need that the <select> element contains some <option> elements. See some reference here!
Then, you can get the list of select elements using javascript and populate it in the text field. Install jQuery and use this example to work on your code. I hope that helps you!