i am new to the select2. i just want to know how to add the textbox and button into the select2.
for better understanding i putting picture here that you might be clear about my question. any answer is appreciated. please help me .
html code..
<select style="width:100%" multiple id="e8">
<option value="volvo">Suger</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
</select>
<script>
$("#e8").select2({
placeholder: 'Placeholder adding value test',
minimumResultsForSearch: -1,
});
</script>
Here is the answer which i got for this:
<select style="width:100%" multiple id="e8">
<option value="volvo">Suger</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
</select>
<script>
$("#e8").select2({
placeholder: 'Placeholder adding value test',
minimumResultsForSearch: -1,
});
$(".select2-drop").append('<div><input type="text" style="width: 86%;
padding: 9px;"name="lname"><input class="PrimaryBtn" type="submit" value="Add"></div>');
</script>
I have never used this plugin, but you can try to create your own div with the textbox and button inside and append that div to #select2-drop div using jQuery's .append(). Don't know if #select2-drop div is always populated(just grabbed it from plugin home page)
Related
I have a form with code similar to:
<form class="eng-select" action="action.php" method="POST">
<select name="position">
<option value="disabled" disabled selected>Engineer</option>
<option value="entry-1">John Doe</option>
<option value="entry-2">David Smith</option>
<option value="entry-3">Michael Silk</option>
</select>
</form>
Which produces a dropdown like this:
However I would like to change the css color of the disabled selected entry (what the user sees when they load the page - the picture above). Is this possible, and if so what would the proper CSS call be?
I have looked at similar posts for IE here that mention:
select option [disabled] { background-color: blue; }
but this does not work for me (I am using Google Chrome).
To clarify - I would like to change the CSS before the user clicks and opens the dropdown box.
Your CSS must be
select option[disabled] { background-color: blue; }
Without the space after option. It should work better this way.
With the space, it applies to descendants of the option.
use below css for disabled select option
select option:disabled {
background-color: blue;
}
<form class="eng-select" action="action.php" method="POST">
<select name="position">
<option value="disabled" disabled selected>Engineer</option>
<option value="entry-1">John Doe</option>
<option value="entry-2">David Smith</option>
<option value="entry-3">Michael Silk</option>
</select>
</form>
I have this input field:
<select name="billing_address_id" id="billing-address-select" class="address-
select" title="" onchange="billing.newAddress(!this.value)">
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
I always want to hide / get rid off the last option. This is what I figured out working in Chrome but unfortunately not in Safari:
select#billing-address-select option:last-of-type {display: none;}
Any chance to get this working across all browsers?
Thanks
You can't display: none on elements in Safari. Safari (and IE) is restricting CSS on form elements.
EDIT
But you could use some javascript to rebuilt your select :
var $select = $('#billing-address-select option').detach();
$('#billing-address-select').empty().append( $select.filter('.add') );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="billing_address_id" id="billing-address-select" class="address-
select" title="">
<option class="add" value="1">Option1</option>
<option class="add" value="2">Option2</option>
<option value="3" disabled>Option3</option>
</select>
I currently have a drop down navigation that opens a modal lightbox window.
I would like to not open the the window if there in an option with no URL selected which is the first default option.
I have tried a number of techniques such as:
- returning false on the onsubmit event of the form.
- Attempting to bind a click event to the goURL a href link using jQuery that would then either
1) call event.preventDefault or 2)stop propagation events.
- coding an onclick event to the goURL a href link.
Below is the html code
<h3>Request a <span>Quote</span></h3>
<form action="#">
<div class="select">
<select id="URL" name="URL" onchange="$('#goLink').attr('href', $('#URL').val());">
<option value="">- Choose a Link -</option>
<option value="/node/1/lightbox2">Link 1</option>
<option value="/node/2/lightbox2">Link 2</option>
<option value="/node/3/lightbox2">Link 3</option>
<option value="/node/4/lightbox2">Link 4</option>
<option class="last" value="/node/5/lightbox2">Link 5</option>
</select>
</div>
</form>
GO
You have to remove the rel attribute if you need a simple link without lightbox effect. The href attribute does not affect it.
Here is a sample of a jQuery code (not necessary the perfect one but just as an example):
$("#url").change(function(){
var selected = $('url :selected'), // Get the selected option
selectedVal = selected.val(); // Get the selected option value
if (selectedValue == "") {
$('#goLink').removeAttr('rel'); // Remove the rel if the value is empty
} else {
$("#goLink").attr('href',selectedVal).attr('rel','lightframe'); // Add rel=lightframe attribute and the href
}
});
I have been searching the web for a result all day to solve my question...
I want a list of options, that would each link to a different image. However, instead of the image opening in a new window, I want the image to open in a lightbox on the same page (lightbox evolution for wordpress is the plugin I am using).
I have tried using onclick in input field, and the lightbox will open (if class="lightbox") but no image loads.
I don't know if I need to add a function that will allow the input to recognize which option is selected so that when the input button is clicked, that that specific image opens in a lightbox.
And if I do need a function, I don't know where to add the function... onclick? Somewhere in the option tag, or select tag?
<form>
<select>
<option value="linkimage1.jpg">image 1</option>
<option value="linkimage2.jpg">image 2</option>
<option value="linkimage3.jpg">image 3</option>
<input type="button" value="submit" />
</select>
</form>
Any help would be appreciated, even if it's to a good link that could explain how I could create a function and add it to my code, and then use a solution to call the function into my dropdown.
Thanks
If using iLightBox http://ilightbox.net/ you can do that like this:
<select id="selectImage">
<option>Select Image</option>
<option value="linkimage1.jpg">image 1</option>
<option value="linkimage2.jpg">image 2</option>
<option value="linkimage3.jpg">image 3</option>
</select>
<script>
jQuery(document).ready(function($){
$('select#selectImage').change(function(){
var $this = $(this),
url = $this.val();
$.iLightBox(url);
});
});
</script>
I have a dropdownlist declared like this:
<select id="PageToCreate_AuthorID">
<option value="">Please select...</option>
<option value="1">Thierry</option>
<option value="2">Vanessa</option>
</select>
When the page is showed the fist time, here is what is displayed:
As you can see, we don't see all the text inside the control.
Then I click inside it and the dropdown is adjusted:
How can I do to have the dropdown showed correctly when the page is showed the first time?
Thanks.
Try to add some css for your select tag :
<select id="PageToCreate_AuthorID">
<option value="">Please select...</option>
<option value="1">Thierry</option>
<option value="2">Vanessa</option>
</select>
Css:
#PageToCreate_AuthorID {
min-width:200px; /* Change this value if you think you must do it */
}