I'm using Flat UI http://designmodo.github.io/Flat-UI/ as an Twitter Bootstrap extension to my site.
I'd like to be able to use the "select" box styling that they provide, which is:
<select name="huge" class="select-block mbl" id="fui-select">
<option value="0">My Profile</option>
<option value="1">My Friends</option>
</select
But I want to pass in a id value and which is created from a db, I dont want to use a pre fixed list as per the example.
I thought I could just do the following (adding myiddata to the select line)
<select name="huge" class="select-block mbl" id=" **myiddata** fui-select">
</select
But this is not returning the results. I cannot find an answer to this in the documentation provided.
Is the approach correct? or is there another way that I have to pass data into a select box?
#JohnKlakegg Is right, you can't have multiple id's (more specifically spaces in the id="" attribute. Remove the "fui-select" id and replace it with your desired id.
The JavaScript should be generating the dropdown component from the class ('select-block') and not the id attribute, so everything should work fine.
I hope this helps :)
Related
I am trying to add a search option to a dropdown which performs the functionality of autocomplete. I have been given a basic dropdown with select tag.
I tried searching for the following options:
1) I tried to convert my select table into a p-dropdown table using PrimeNG but was unsuccessful.
2) I found select2 option for angular and have been unable to bind the selected value from the dropdown to the ngModel value. The value selected must be retained when navigating between the previous or next pages, however that isn't happening.
3) I tried to convert select table to p-autocomplete as well but do not know how to.
Please guide me with any one of the following ways.
This is the provided select dropdown:
<select class="form-control" [(ngModel)]="selectedColumnDetails[rowData.rowId]"
(ngModelChange)="handleChange(rowData.rowId)">
<option *ngFor="let option of tableColumnDetails[selectedTableDetails[rowData.rowId]]">
{{option.col_name}}
</option>
</select>
This is what I tried with select2 for angular.
{{option.col_name}}
Error: No value accessor for form control with unspecified name attribute
This error is thrown for the following line:
[(ngModel)]="selectedColumnDetails[rowData.rowId]
try to add the name attribute along with ngmodel in the same tag
<select> works slightly differently with ngModel.
Taking your code snippet, Modifying it to pick ControlValue
<select class="form-control" [(ngModel)]="selectedColumnDetails[rowData.rowId]"
(ngModelChange)="handleChange(rowData.rowId)">
<option *ngFor="let option of tableColumnDetails[selectedTableDetails[rowData.rowId]]" [(ngValue)]="option">
{{option.col_name}}
</option>
</select>
Should work for you.
You should find ample examples provided by angular here and here
For select2 in Angular, try:
<select2 ... [value]="selectedColumnDetails[rowData.rowId]" (valueChanged)="handleChange(rowData.rowId)"></select2>
Of course, you would have to update selectedColumnDetails[rowData.rowId] inside handleChange(rowData.rowId).
[(ngModel)]="data" is short for [value]="data" (input)="data = $event.target.value". Unfortunately the ng2-select2 package does not support the input event so you have to write this out in the long form with valueChanged.
Given the following jQuery plugin: http://selectric.js.org/index.html which replaces the functionality of that of a regular select box by using custom UL LI lists,
Based on the plugins documentation, I know that you can programmatically select an option value if you already know the index to select by using the following code:
$('#idofselectbox').prop('selectedIndex', 3).selectric('refresh');
But they do not include a sample to be able to find and select an option value by a value.
For example,
Let's say i'd like to select the option value named 'apples' without actually knowing its index in the select box. Is this even remotely possible?
<select id="idofselectbox">
<option value="oranges">oranges</option>
<option value="pears">pears</option>
<option value="apples">apples</option>
<option value="strawberries">strawberries</option>
</select>
You can set the value as if it's a regular combo box, then call refresh on selectic to refresh the UI.
$('#idofselectbox').val('apples').selectric('refresh');
I am attempting to retrieve and set the selected value of a select element (drop down list) with jQuery.
for retrievel i have tried $("#myId").find(':selected').val(), as well as $("#myId").val() but both return undefined.
Any insight into this problem would be much appreciated.
to get/set the actual selectedIndex property of the select element use:
$("#select-id").prop("selectedIndex");
$("#select-id").prop("selectedIndex",1);
The way you have it is correct at the moment. Either the id of the select is not what you say or you have some issues in the dom.
Check the Id of the element and also check your markup validates at here at W3c.
Without a valid dom jQuery cannot work correctly with the selectors.
If the id's are correct and your dom validates then the following applies:
To Read Select Option Value
$('#selectId').val();
To Set Select Option Value
$('#selectId').val('newValue');
To Read Selected Text
$('#selectId>option:selected').text();
$('#myId').val() should do it, failing that I would try:
$('#myId option:selected').val()
When setting with JQM, don't forget to update the UI:
$('#selectId').val('newValue').selectmenu('refresh', true);
$("#myId").val() should work if myid is the select element id!
This would set the selected item: $("#myId").val('VALUE');
Suppose you have created a Drop Down list using SELECT tag like as follows,
<select id="Country">
Now if you want to see what is the selected value from drop down using JQuery then, simply put following line to retrieve that value..
var result= $("#Country option:selected").text();
it will work fine.
I know this is old but I just had a bear of a time with Razor, could not get it to work no matter how hard I tried. Kept coming back as "undefined" no matter if I used "text" or "html" for attribute. Finally I added "data-value" attribute to the option and it read that just fine.
<option value="1" data-value="MyText">MyText</option>
var DisplayText = $(this).find("option:selected").attr("data-value");
$( "#myId option:selected" ).text(); will give you the text that you selected in the drop down element. either way you can change it to .val(); to get the value of it . check the below coding
<select id="myId">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>`
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>
Try this
$('#your_select_element_id').val('your_value').attr().add('selected');
Is it possible to disable an option after creating a msDropdown plugin?
I explain my problem better.
I want to put html into each option with icons, text and some other stuff, so first i create an empty select then I add each option with the add function:
dropdown.add({text:$price.html(), value:'normal', className:'normal'});
The problem is that if a certain condition happen I have to disable one option, but there are no way to set an option disabled by using plugin settings.
There is the possibility to make an option disabled only by setting the related parameter disabled=disabled into the select before to call the msDropdown function, but I can't use this solution since I have to put dinamically html into option text.
Is there another way to do it?
Thank you for your help.
I found a solution.
I create my select empty and I fill each option with add function as before, but when that condition happen just do this:
var dropdown = $('select[name="priceType"]').msDropdown().data("dd");
if(credits_error) { // option must be disabled
dropdown.destroy(); // Make it a simple select
$('select[name="priceType"] option').attr('disabled', 'disabled');
dropdown = $('select[name="priceType"]').msDropdown().data("dd");
}
This way first I make it a simple select by calling destroy function, then I set properly the disabled attribute and I create a new msDropdown select.
It works for me, I tested it on IE, FF and Chrome
Yes, it is possibile. It can be done by using the disabled property of the option tag:
<select id="payments" name="payments" style="width:250px;">
<option value="" data-description="Choos your payment gateway">Payment Gateway</option>
<option value="amex" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Amex-56.png" data-description="My life. My card...">Amex</option>
<option value="Discover" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Discover-56.png" data-description="It pays to Discover...">Discover</option>
<option value="Mastercard" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Mastercard-56.png" data-title="For everything else..." data-description="For everything else...">Mastercard</option>
<option value="cash" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Cash-56.png" data-description="Sorry not available..." disabled="true">Cash on devlivery</option>
<option value="Visa" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Visa-56.png" data-description="All you need...">Visa</option>
<option value="Paypal" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Paypal-56.png" data-description="Pay and get paid...">Paypal</option>
</select>
The option 'cash' will be disabled.
Here is a working fiddle: http://jsfiddle.net/NKQRj/1/
EDIT
In this second example data are loaded from JSON data using:
$("#payments").msDropDown({byJson:{data:jsonData, name:'payments2'}}).data("dd");
to fill the elements.
You can define your options as disabled in your JSON data using disabled: true property:
{image:'http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Cash-56.png', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true},
here is a working fiddle: http://jsfiddle.net/NKQRj/3/
I building a country selection drop down that, on select, populates a city drop down.
Due to my code i need to retrieve after country selection the corresponding ISO code and unique country ID, and i would rather not query the DB again for that. So i was thinking stocking this data within the tag, with something like this :
<option rel='US' someother-attribute="1" >United States</option>
Would there be any other more straight forward way to do that ? If not what attributes could i use without impact on my HTML output.
HTML5 data attributes would be the way to go
Setting the data in the mark-up
HTML Mark-Up
<input id="foo" data-code="12376213jkh132kjh3" />
Reading the value on the client
JavaScript
var code = document.getElementById("foo").getAttribute("data-code");
I do not see the jQuery tag, but just in case it would be
jQuery
var code = $("#foo").data("code");