If I ve dropdown of
<select id="city">
<option value="blore">Bangalore</option>
<option value="delhi">Delhi</option>
<option value="che">Chennai</option>
<option value="jaipur">Jaipur</option>
<option value="hyd">Hyderabad</option>
<option value="mum">Mumbai</option>
<option value="pune">Pune</option>
</select>
then the value of dropdown selected can be extracted using :
document.getElementById('city').value
But since we cant style the select-option dropdown, I was wondering is there any way where I define a list type dropdown and can extract the value user selects in javascript.
Something like.
(Dropdown using lists)
<ul id="city">
<li value="something1">Something1</li>
<li value="something2">Something2</li>
<li value="something3">Something3</li>
</ul>
and document.getElementById('city').value
Kindly correct me if m wrong or is there any other way to define a styled dropdown menu whose value can be extracted in javascript for processing.
If more code is required kindly put it in comment.
Thanks in advance :)
Since you're basically looking to mimic the functionality of a form element without using one, it's going to take a little extra work in javascript. jQuery will greatly simplify this, so I'll use it for this example. Common practice these days when wanting to attach arbitrary data to an html element is to use an attribute prefixed with "data-". You'll see why in a second.
So, for your example, you could use the markup:
<ul id="city" data-value="">
<li data-value="something1">Something1</li>
<li data-value="something2">Something2</li>
<li data-value="something3">Something3</li>
</ul>
Style your list however you like, including js to create the "dropdown" effect, etc. I'd suggest looking into bootstrap's dropdown component if you'd like to save more time.
Finally, you'll need to create the javascript to select a value, and put that value as the 'selected' one in your parent element:
$('#city li').click(function() {
$(this).parent().data('value', $(this).data('value'));
});
This is making use of jQuery's .data() method as a shortcut for setting and getting data- attributes.
You can now access the currently-selected value by calling:
$('#city').data('value');
Without jQuery, there is more involved. I'll leave it up to you whether you think it's useful to pursue a vanilla js solution.
Related
I need to update an option text and I do not have #id of the select box.
I found examples like this:
$('#selectid option:contains("OLD_TEXT_VALUE")').text('newtext');
I can't use this example, since I can only access select like this:
selectedField.find('select')
how do I add
option:contains("OLD_TEXT_VALUE")').text('newtext');
to the above way of selecting select, is it possible?
This is my code, there can be many selects dynamically inserted into the page in this format.
<div id="basic_select_xxxx" class="form-group selectable">
<select class="form-control">
<option>Select something</option>
</select>
</div>
I can select the select only like this:
$('#basic_select_xxxx').find('select).
how to then update select option with new text by looking up the old value? Is it possible this way? I can not put id on select, so let me know if there is other way?
You can chain your jQuery Do something like:
$('#basic_select_xxxx').find('select option:contains("OLD_TEXT_VALUE")').text('newtext');
Assuming all the containers ID's start with same "basic_select_" prefix you can use that in an "attribute starts with" selector
$('.selectable[id^="basic_select_"] select option:contains("OLD_TEXT_VALUE")').text('newtext');
Basic Problem
I have a multi-select (list) that depending on how I write the html/angular has a bug. In the first case the last 3 characters are cut off from the rendering. In the second case the name is not visible but instead the {{}} placeholder until the item is clicked.
I'd simply like a way for me to display the elements in a correct fashion without bugs.
Finally, this behavior seems to happen if an element is added to the categories array after the page and select has rendered.
With ng-bind
<select id="categories" name="categories" class="ep_field sumoSelect" multiple="multiple"
ng-model="selectedCategories"
ng-change="angularCategorySelectedGrants($event)"
<option ng-repeat="cat in categories" value="{{cat.id}}" ng-bind="cat.name"></option>
</select>
Without ng-bind
<select id="categories" name="categories" class="ep_field sumoSelect" multiple="multiple"
ng-model="selectedCategories"
ng-change="angularCategorySelectedGrants($event)"
<option ng-repeat="cat in categories" value="{{cat.id}}">{{cat.name}}</option>
</select>
With ng-options
With ng-options everything appears but I am unable to actually click on the elements to select them - they are frozen.
<select id="categories" name="categories" class="ep_field sumoSelect" multiple="multiple"
ng-model="selectedCategories"
ng-change="angularCategorySelectedGrants($event)"
ng-options="cat.name for cat in categories track by cat.id" >
</select>
Since no-one wrote an answer, see my own work-around as the accepted answer.
My own workaround
It seems the problem was with adding an item to the categories array after the initial rendering has taken place. There we two workarounds I found:
Add all elements to the array only once without adding again OR
Hide the dom select element utilizing ng-if for 100ms and make it visible again. This forces the browser to re-render the elemnents and renders them correctly.
In HTML (wrapping the select):
<div ng-if="categories!=undefined && categoriesLoaded">
...Select code here...
</div>
In the controller (Javascript):
$scope.categoriesLoaded = false;
//Trigger render
$timeout(function(){ $scope.categoriesLoaded = true;}, 0);
I am making a small project with MVC4, C#, Razor Engine and jQuery. In my code I have a drop list, and every time an item is selected in that drop list I want to send an Ajax request with the information selected, plus the id of an order that is in the HTML:
<input type="hidden" id="materialRequestId" value=#myId />
To achieve this, when a user selects an item in my drop list, I try to get the closest/sibling/find HTML tag by using its id, but I am failing because $(this) seems to have only a class of select2-offscreen and thus everytime I use one of the previous jQuery functions, I get undefined.
$('#OfficeId').change(function () {
alert($(this).closest("div").siblings("#materialRequestId").value;);
});
This is my HTML:
<td>
<input type="hidden" id="materialRequestId" value=4 />
<div class="hide officeList">
<select id="OfficeId" name="OfficeId">
<option value="18">AMAALB</option>
<option value="19">AMABGR</option>
<option value="20">AMACRO</option>
</select>
</div>
</td>
What am I missing here? Why is this not working?
If you get the value direct
$("#materialRequestId").attr("value");
And make sure that only 1 element per page has that unique id it should work
What I'm trying to do is give my textfield a value based an an option is select form my drop down. For example: I have 2 fields, a drop down and a textfield. I select Facebook from the dropdown and the value "http://www.facebook.com/" appears in my textfield. How can I achieve this effect? I know that I have to call a function onchange of the drop down but that's pretty much everything I know. Remember that I'm not trying to copy the exact selected value from the dropdown to the textfield here.
example markup
<select>
<option value="http://www.facebook.com">Facebook</option>
<option value="http://www.twitter.com">Twitter</option>
</select>
<input type="text" />
jquery
$('select').change(function() {
$('input[type="text"]').val(this.value);
});
Here's a fiddle
In response to your comment, there are a number of ways to do it (a switch statement, if/elseif statement etc), the easiest would probably be to create an object mapping the text to the corresponding url:
var urlFromText = {
'Facebook' : 'http://www.facebook.com/',
'Twitter' : 'http://www.twitter.com/'
};
Then, in your change handler, you can simply use:
$('input[type="text"]').val(urlFromText[$('option:selected', this).text()]);
Here's an example
HTML
<select id="network">
<option value="http://www.facebook.com">Facebook</div>
<option value="http://www.twitter.com">Twitter</div>
</select>
<input id="network-txt"/>
Jquery
$("#network").change(function(){
$("#network-txt").val($(this).val());
});
Working Example http://jsfiddle.net/nVEEE/
I am querying three databases and want to show their columns in three click-able lists. I want the user to select a number of columns from these lists and then on pressing a button, only the selected columns and the lists/tables that they came from would be passed to a function for processing.
I found some code online that does this with forms. Is there any way to do this without forms? I am used to using JList with java and have little experience with javascript.
.
The code that does something similar to what I am trying to do (with forms) for one list is:
http://www.mredkj.com/tutorials/tutorial006.html
EDIT: I just found out about Javascript ListBoxes. I think I am just going to use them. It seems like using forms is going to inevitable when creating lists.
jQuery is a really simple JavaScript library for doing things like this (and for user interaction in general).
For example, if you want to select the second column of a table and store the cells' data into an array, this simple code would do it (I'm notorious for making mistakes, so correct me if it doesn't):
var elements = [];
$('#id_of_your_table tr td:eq(1)').each(function()
{
elements.push($(this).html());
});
Now, elements contains the values of the second column of the table.
You're talking about plain 'ol HTML <select>, I think. Paste this into an HTML document to see what I mean.
<select id="my_listbox" multiple="yes" size="6">
<option>Foo 1</option>
<option>Foo 2</option>
<option>Foo 3</option>
<option>Foo 4</option>
<option>Foo 5</option>
<option>Foo 6</option>
</select>
To get the selected values, this code should work:
var values = [];
$('#my_listbox :selected').each(function(i, selected)
{
textvalues[i] = $(selected).text();
});
If your users can't figure out how to check the items, writing your own checkable listbox is really easy. Check out my example here: http://jsfiddle.net/2hDVR/2/.
Javascript doesn't 'make lists'. Lists are HTML. Your JavaScript can render HTML, but I assume you're getting this from the server anyways.
I'd probably do this via HTML:
<ul>
<li><label><input type="checkbox" id="column1" />column 1</label></li>
<li><label><input type="checkbox" id="column2" />column 2</label></li>
<li><label><input type="checkbox" id="columnn" />column n</label></li>
</ul>
I'm not sure what you are asking in regards to wanting to do this without a form. Either way you need to pass data back to the server to get the data to render the completed table. That's what forms are for.