I have a dropdown that I want to be able to change which id to pass to a path.
Dropdown
<select id="student-selection">
<option value="1">Frank</option>
<option value="2">Bill</option>
</select>
Link
<%= link_to "Create Pet", new_student_pet_path(:id_from_select_dropdown) %>
How is this possible? I'm guessing that I should use coffeescript in some way but I can't figure out a good way besides just parsing the link string and replacing an ID.
I'm also willing to use a div with onclick event if that would make it easier instead of an anchor.
I discovered a good way of doing it. I just put the URLs in the select options as the values instead of using the IDs via the path functions. This way in the coffeescript I just need to set the window.location to the value of the selected option.
HTML
<select id="student-selection">
<option value="/students/1/pets/new">Frank</option>
<option value="/students/2/pets/new">Bill</option>
</select>
CoffeeScript
$ ->
$('btn-id').click ->
window.location = $('#student-selection').children("option").filter(":selected").val()
Related
https://jsfiddle.net/53jprgse/
I'm not able to get dynamic select option value attributes set using Vue 2.0.3 and :value or v-bind:value bindings. No option values are being set when I use these.
I have to add the static html value="" or value="some value" attribute to get option value attributes to render their dynamic values.
My data set is a simple array of strings.
This is illustrated by inspecting the select elements at the fiddle above.
Can someone tell me what I'm missing here? Seems like this should be very straight forward.
If you want the DOM to actually have the value attribute set by v-bind you have to actually add the value attribute (doesn't matter what it says).
So, in your first 2 selects you basically had this:
<div>
<p>
:value="county"
</p>
<select v-model="filterByCounty">
<option value="">Filter by county...</option>
<option v-for="county in counties" :value="county">
{{ county }}
</option>
</select>
{{ selected_county }}
</div>
If you just add a value to the <option> it will work as you'd like:
<option v-for="county in counties" :value="county" value="">
I am using JQuery Mobile for a mobile website, and for localization I am using i18next. I have an issue in my form, here it is :
<form id="form" method="POST" action="webservices/action.php">
<select id="subject">
<option value='0' data-i18n="contact.email" selected></option>
<option value='1' data-i18n="contact.name"></option>
<option value='2' data-i18n="contact.object"></option>
</select>
</form>
The localization works fine, I have the desired text displayed. However, the first option is not displayed and it is not possible to select it (it is possible to select other options). When looking at the select object in Javascript, it seems that the correct index is selected., therfore it is a UI problem.
I don't have any problem when not using i18next.
Anyone have an idea how to fix this issue ?
I found a workaround. I noticed that when I sent my form and reset it, the dropdown list was correclty displayed. So after initializing i18n, I used this:
document.getElementById("form").reset();
The form is now displayed correctly.
When using the ui-select2 (https://github.com/angular-ui/ui-select2), the preselected option is not shown properly.
I created a plunkr: http://plnkr.co/edit/Ek86jUciPo7rgBnbKdFc
When the page is loaded, the model of the select is set to the second option. And somehow, it is properly set in the select box, see: https://dl.dropboxusercontent.com/u/1004639/stackoverflow/screenshot-select2.png. But the value is not shown above the text box. Or in the select box when the select box is closed.
PS: I tried it without ng-options. Same problem.
I can get it working using ng-repeat and ng-selected. Unfortunately, though, when you use ng-repeat, you can only bind to a string. It's not ideal, but the choice does start out pre-selected.
Here's a working http://plnkr.co/edit/jodn35fvUQpdD2d5BpoC
<select ui-select2="" ng-model="selectedId" >
<option value="">Choose...</option>
<option ng-repeat="option in options" value="{{option.id}}" ng-selected="{{option.id == selectedId}}">{{option.name}}</option>
</select>
And I updated the JS to add this line:
$scope.selectedId = $scope.selected.id;
https://github.com/angular-ui/ui-select2#working-with-dynamic-options
ui-select2 is incompatible with <select ng-options>. For the best results use <option ng-repeat> instead.
I'm trying to use custom data attributes of HTML in Struts2 tags
here is my sample code
<s:select list="myList" listKey="myListVal" listValue="myListDesc" data-inputs="myListInput" ></s:select>
i was expecting something like this for example
<select >
<option value="myListVal1" data-inputs="myListInput1">myListDesc1</option>
<option value="myListVal2" data-inputs="myListInput2">myListDesc2</option>
<option value="myListVal3" data-inputs="myListInput3">myListDesc3</option>
</select>
instead I'm getting this
<select data-inputs="myListInput" >
<option value="myListVal1" >myListDesc1</option>
<option value="myListVal2" >myListDesc2</option>
<option value="myListVal3" >myListDesc3</option>
</select>
Is it possible to describe data-attribute in struts select tags for Options inside it.
Override the <s:select> tag template. Or just use HTML tags with <s:iterator>
<select name="list">
<s:iterator value="myList" status="stat">
<option value="<s:property value="myListVal"/>" data-inputs="myListInput<s:property value="#stat.index"/>"><s:property value="myListDesc"/></option>
</s:iterator>
</select>
You can't inject custom attributes into a Struts2 UI Tag directly.
According to Dave Newton's comment, you can with Struts2 >= 2.1.x
But still it's not possible to apply them to the option elements instead of the select, so I'll leave the answer in case you need to extend the original select tag to define a custom behaviour (like apply certain attributes to the options).
You can extend the <s:select> Struts2 tag to allow it to manage new kind of attributes...: http://bodez.wordpress.com/2009/03/13/customising-struts2-jsp-tags/
,
or create your own tag directly, but in your case would be overkill: http://joshuajava.wordpress.com/2008/12/27/creating-custom-components-with-struts-2/).
Last but not least, you could even add your custom attributes once the page is rendered, using something like jQuery (demo: http://jsfiddle.net/CLNDs/ ); they will be accessible, but not visible in source.
<select name="channel[]" multiple="multiple">
<option value="pants">Pants</option>
<option value="tshirts">T-Shirts</option>
<option value="sweats">Sweats</option>
</select>
So, form is GET, and if I select multiple, and when I click on submit URL is like:
?channel[]=pants&channel[]=tshirts
I need it to be like:
?channel=pants+tshirts
This cannot be achieved with an HTML only form. You'll have to incorporate javascript to manipulate the value of channel.