Twitter bootstrap select picker add "Choose One" - javascript

Hi i'm using Bootstrap select, and i'm trying to add default option like Choose One
Here's my html code,
<div class="container">
<h3>Bootstrap Select</h3>
<select id="dataCombo" class="selectpicker">
<option data-hidden="true">Choose One</option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
<option value="six">Six</option>
</select>
</div>
Also i'm using jqueryvalidation.org plugin for validation. On form submit above select option is not validating and i'm getting choose one if i print_r all posted data
Did anyone know where i'm going wrong ?

<div class="container">
<h3>Bootstrap Select</h3>
<select id="dataCombo" class="selectpicker">
<option value="" disabled selected>Choose One</option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
<option value="six">Six</option>
</select>
</div>
Is this what you have wanted ...

Related

grab all selected answers from a form

I am trying to grap all selected values from a page and push them into an array.
I have tried the following:
values = $.map(answers ,function(option) {
return option.value;
});
//it was working at somepoint, but apparently not anymore. is there a easier way to get this accomplished?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
</div>
<div class="input-field select2">
<p>q2</p>
<select>
<option value="" disabled selected>Choose your option</option>
<option value="2">a</option>
<option value="5">b</option>
<option value="7">c</option>
<option value="10">d</option>
<option value="12">e</option>
</select>
<!-- <label>Materialize Select</label> -->
</div>
<div class="input-field select3">
<p>What do you Find More Interesting?</p>
<select>
<option value="" disabled selected>a</option>
<option value="1">b</option>
<option value="3">c</option>
</select>
</div>

How to delete the selected option using title attribute of select tag

I want to delete the first option of the selected and I have selected tag id and class but the problem is selected class and id is changing when I open the form of different-2 event.and class "r" of selected tag is using more than one time different-3 drop down of form.
I want to remove the selected option using title attribute of selected tag.
If any other way to resolved this type of problem please share.
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="">Select One </option>
<option value="Michigan"> Michigan</option>
<option value="Alabama"> Alabama</option>
<option value="Alaska"> Alaska</option>
<option value="Arizona"> Arizona</option>
<option value="Arkansas"> Arkansas</option>
<option value="California"> California</option>
<option value="Colorado"> Colorado</option>
<option value="Connecticut"> Connecticut</option>
<option value="Delaware"> Delaware</option>
<option value="Florida"> Florida</option>
<option value="Georgia"> Georgia</option>
</select>
I want to delete
<option value="">Select One </option>
Here is how to select using class and title in plain JavaScript
window.onload=function() {
var sel = document.querySelector("select.r[title='State*']");
console.log(sel);
sel.options[0]=null;
}
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option>Please select State</option>
<option>option 1</option>
</select>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="NotState*">
<option>Please select Not State</option>
<option>option 1</option>
</select>
Ditto in jQuery
$(function() {
var $options = $("select.r[title='State*'] option");
$options.eq(0).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option>Please select State</option>
<option>option 1</option>
</select>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="NotState*">
<option>Please select Not State</option>
<option>option 1</option>
</select>
you can add the hidden attribute:
<option value="" hidden>Select One</option>
this will result in being the default selected value but you can't select it in the dropdown
Example:
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="" hidden>Select One</option>
<option value="Michigan">Michigan</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
</select>
The hidden attribute can also be used to keep a user from seeing an element until some other condition has been met (like selecting a checkbox, etc.).
The hidden attribute is new in HTML5.
Source: http://www.w3schools.com/tags/att_global_hidden.asp
In your scenario if select box's id is changing dynamically then you can achieve this with it's class name like below
$(".r option[value='']").each(function() {
$(this).remove();
});
If you want to delete it by using ID then you can do it like this..
$("#DROPDOWN_735 option[value='']").each(function() {
$(this).remove();
});
Or
$("select option[value='']").each(function() {
$(this).remove();
});
Try this
$(document).ready(function() {
$("select[title='State*'] option:first-child[value='']").remove();
})
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="">Select One </option>
<option value="Michigan"> Michigan</option>
<option value="Alabama"> Alabama</option>
<option value="Alaska"> Alaska</option>
<option value="Arizona"> Arizona</option>
<option value="Arkansas"> Arkansas</option>
<option value="California"> California</option>
<option value="Colorado"> Colorado</option>
<option value="Connecticut"> Connecticut</option>
<option value="Delaware"> Delaware</option>
<option value="Florida"> Florida</option>
<option value="Georgia"> Georgia</option>
</select>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="">Select One </option>
<option value="Michigan"> Michigan</option>
<option value="Alabama"> Alabama</option>
<option value="Alaska"> Alaska</option>
<option value="Arizona"> Arizona</option>
<option value="Arkansas"> Arkansas</option>
<option value="California"> California</option>
<option value="Colorado"> Colorado</option>
<option value="Connecticut"> Connecticut</option>
<option value="Delaware"> Delaware</option>
<option value="Florida"> Florida</option>
<option value="Georgia"> Georgia</option>
</select>
Hope it will be useful.

Connected select tags

I'm have several select tags on one page, grouped 3 by 3.
And I want every group by 3 to share the same option list, where if the user chooses "Sweden" in the first box, then "Sweden" is removed from the options of the second box. But here is the tricky part, IF the user decides to change the first box again to lets say "England", then "Sweden" will be back in the list of the second select box. Sounds fuzzy?
My code manages to remove a country from the next box but then it is removed for good, also the change is only affecting the closest Select tag right now. I would like to change the content for all 4 select tags in that group.
Here is my code, please point me in the right direction:
<div id="group1">
<div>
<select>
<option value="France">France</option>
<option value="Sweden">Sweden</option>
<option value="England">England</option>
<option value="Germany">Germany</option>
<option value="USA">USA</option>
</select>
</div>
<div>
<select>
<option value="France">France</option>
<option value="Sweden">Sweden</option>
<option value="England">England</option>
<option value="Germany">Germany</option>
<option value="USA">USA</option>
</select>
</div>
<div>
<select>
<option value="France">France</option>
<option value="Sweden">Sweden</option>
<option value="England">England</option>
<option value="Germany">Germany</option>
<option value="USA">USA</option>
</select>
</div>
</div>
<div id="group2">
<div>
<select>
<option value="France">France</option>
<option value="Sweden">Sweden</option>
<option value="England">England</option>
<option value="Germany">Germany</option>
<option value="USA">USA</option>
</select>
</div>
<div>
<select>
<option value="France">France</option>
<option value="Sweden">Sweden</option>
<option value="England">England</option>
<option value="Germany">Germany</option>
<option value="USA">USA</option>
</select>
</div>
<div>
<select>
<option value="France">France</option>
<option value="Sweden">Sweden</option>
<option value="England">England</option>
<option value="Germany">Germany</option>
<option value="USA">USA</option>
</select>
</div>
</div>
$("select").change(function(){
var value = $(this).val();
$(this).closest('div').next('div').find("option").removeClass('hide');
$(this).closest('div').next('div').find("option[value='"+value+"']").addClass('hide');
});
UPDATED:
JSFiddle
add one class in your css
.hide{display:none;}
after that update your script function
$(this).closest('div').next('div').find("option").removeClass('hide');
$(this).closest('div').next('div').find("option[value='"+value+"']").addClass('hide');
In your code , you remove the element from the DOM using .remove()
if you need that element again you save that element in DOM.
I hope it will help you.

How to stop select box to use select2 plugin

i have many dropdowns in my page.
for dropdowns i am using select2 plugin.
i don't want to use select2 plugin for some of the dropdowns.
is there any way to do so?
i have searched on google and also have gone through their documentation but i didn't get anything related this.
this is my select box code ..
<div class="cust-input">
<select name="management[]">
<option value="0">Select Management</option>
<option value="Chairman">Chairman</option>
<option value="Vice Chairman">Vice Chairman</option>
<option value="Vice Chancellor">Vice Chancellor</option>
<option value="Secretary">Secretary</option>
<option value="Registrar">Registrar</option>
<option value="Dean">Dean</option>
<option value="Owner">Owner</option>
<option value="Other">Other</option>
</select>
</div>
You can implement that using specific class instead of common select tag element.
use:
$(".useSelect2").select2(); //either your desired name of your class or unique ID
instead of
$("select").select2(); // if you used this method, select2 will applied to all dropdowns.
Example:
<select name="management[]" class="useSelect2">
<option value="0">Select Management</option>
<option value="Chairman">Chairman</option>
<option value="Vice Chairman">Vice Chairman</option>
<option value="Vice Chancellor">Vice Chancellor</option>
<option value="Secretary">Secretary</option>
<option value="Registrar">Registrar</option>
<option value="Dean">Dean</option>
<option value="Owner">Owner</option>
<option value="Other">Other</option>
</select>
Javascript:
$(".useSelect2").select2();
Other dropdowns:
<select name="management[]" class="dontuseSelect2">
<option value="0">Select Management</option>
<option value="Chairman">Chairman</option>
<option value="Vice Chairman">Vice Chairman</option>
<option value="Vice Chancellor">Vice Chancellor</option>
<option value="Secretary">Secretary</option>
<option value="Registrar">Registrar</option>
<option value="Dean">Dean</option>
<option value="Owner">Owner</option>
<option value="Other">Other</option>
</select>
Put a class on the select elements you want to use select2 with, and then use that class to instantiate the plugin. Something like this:
$('.select2').select2();
<div class="cust-input">
<select name="management[]" class="select2">
<option value="0">Select Management</option>
<option value="Chairman">Chairman</option>
<option value="Vice Chairman">Vice Chairman</option>
<option value="Vice Chancellor">Vice Chancellor</option>
<option value="Secretary">Secretary</option>
<option value="Registrar">Registrar</option>
<option value="Dean">Dean</option>
<option value="Owner">Owner</option>
<option value="Other">Other</option>
</select>
<!-- this select will not be styled -->
<select>
<option>Foo</option>
<option>Bar</option>
</select>

on select a option show higher value in other select option

Here I use 2 select option for show budget price,
when I select a price like 4000 then second select option show visible and display higher price than 4000.
What jquery code should I use?
Here is my code:
DEMO
pls check
<li>
<label>Budget</label>
<select name="budget_from" id="budget_from" onchange="setBudgetFinal('1','1', 'requiremant_frm','3999999','19999','5999','1');" onblur="" onfocus="" class="budget" style="width: 89px; visibility: visible;">
<option value="3999"><4000</option>
<option value="3000">3000</option>
<option value="5000">5000</option>
<option value="7000">7000</option>
<option value="9000">9000</option>
<option value="11000">11000</option>
<option value="13000">13000</option>
<option value="15000">15000</option>
<option value="17000">17000</option>
<option value="19000">19000</option>
<option value="21000">21000</option>
<option value="25000">25000</option>
<option value="30000">30000</option>
<option value="40000">40000</option>
<option value="45000">45000</option>
<option value="50000">50000</option>
<option value="55000">55000</option>
<option value="60000">60000</option>
<option value="65000">65000</option>
<option value="70000">70000</option>
<option value="75000">75000</option>
<option value="80000">80000</option>
<option value="85000">85000</option>
<option value="90000">90000</option>
<option value="95000">95000</option>
<option value="100000">1 Lac</option>
<option value="105000">1.05 Lacs</option>
<option value="110000">1.10 Lacs</option>
<option value="115000">>1.15 Lacs</option>
</select>
<span id="sc"> to</span>
<select style="visibility: visible;" disabled="" id="budget_to" name="budget_to" class="budget">
<option value="">Max Price</option>
</select>
</li>
Try this.
$('#budget_from option').on('click', function(){
$('#budget_to').find('option').not(':first').remove();
$(this).nextAll().clone(true).appendTo('#budget_to');
$('#budget_to').removeAttr('disabled');
});
Fiddle Demo

Categories

Resources