Currently I create a Handlebars template for each form and use value={{user}} in them. So I can fill any form easily for updating any entity. But select, radio and ckeckboxs are different. Is there any clean way to populate these elements too. They do not have value attributes.
<select id='select'>
<option selected value=user name=test>test</option>
</select>
as you can see, you can control the value of select by set "selected" attribute to specific options.
Or you can try embed some javascript code like
document.getElementById('select').value={{user}}
You need to make sure you have options with correct value attributes set
You can achieve this by making use of the each helper.
<select>
{{#each options}}
<option>{{this}}</option>
{{/each}}
</select>
Where options is a plain array (["apple", "banana", "pear"]).
You can find more info on the homepage. There's also an example where your array contains object, which could be useful should you need to specify value attributes.
On stackoverflow, I found this reply :
How to set selected select option in Handlebars template
With a very good solution (from #janjarfalk edited by #BlaM) :
With this partial (using Jquery) ...
window.Handlebars.registerHelper('select', function( value, options ){
var $el = $('<select />').html( options.fn(this) );
$el.find('[value="' + value + '"]').attr({'selected':'selected'});
return $el.html();
});
You can wrap selects in your Handlebars template with {{#select status}}...
<select>
{{#select status}}
<option value="Completed">Completed</option>
<option value="OverDue">OverDue</option>
<option value="SentToPayer">SentToPayer</option>
<option value="None">None</option>
{{/select}}
</select>
Related
I want to set re-select option in , I know there is a function to do that for single element using javascript but I use it as an array so I need to set the value inside the loop su as this example:
<select name="days" value = "3">
<option value="1">Sat</option>
<option value="2">Sun</option>
<option value="3">Mon</option>
<option value="4">Tue</option>
<option value="5">Wed</option>
<option value="6">Thu</option>
<option value="7">Fri</option>
</select>
I think this example will work fine with react, but can I use such a code in normal html and javascript inside the loop.
if you have a database store the day value, instead of use if else function, filter the day on select tag to make the option selected as value in database
basically inside foreach there is a select option tags I need to set selected using the value in database like so:
$('#dynamic_field').append('<select><option value="1">Sat</option><option value="2">Sun</option> ..... </select>
Thanks
In the end of the loop:
$('select[name^=day]',item.id).each(function(a,b){ $(b).val(item.day); });
with that will check for each value and set the value in the database as selected in select form
*Note: item.id and item.day came from database
I have a drop down in my application that looks similar to this -
<select>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Mercedes</option>
<option value="4">Audi</option>
</select>
How would I collect the car brand options into an array? I know the java selenium bindings have the select class to help with this however there doesn't appear to be an equivalent solution using webdriverio?
You should be able to use .elements method based on tag for the option tag this should return you JSON Objects.
Here is the link that states that:
http://webdriver.io/guide/usage/selectors.html
You need to find all the <option> elements in the select list, and then convert the list of elements to a flat list of values using the .map() method:
browser.getElements('option').map(option => option.getText());
I am trying to get the value that user selects from my dropdown.
I have
<select ng-model="item" ng-change="vm.getItem()">
<option value="discount">Discount</option>
<option value="{{::item}}"
ng-repeat="item in vm.items"
ng-bind="item.name"
</option>
</select>
In my controller
vm.getItem = function() {
vm.pickedItem = //not sure what to do...
//I need to get the select item
//please noted that the discount is a stand alone option value. I need to get
//that too if user selects it.
}
I don't want to use ng-option as it has some restriction that I don't need. I was hoping to get it from just regular <option> tag.
Thanks for the help!
I would recommend you to use ngOptions
Set up select element with proper model i.e. vm.pickedItem which can be directly used in controller, or you can pass it to your method like vm.getItem(vm.pickedItem)
<select ng-model="vm.pickedItem" ng-change="vm.getItem(vm.pickedItem )">
<option value="discount">Discount</option>
<option value="{{::item}}"
ng-repeat="item in vm.items"
ng-bind="item.name">
</option>
</select>
vm.getItem = function() {
var selectedItem = vm.item;
////vm.item is the bound variable to the dropdown's ng-model directive
}
If you really wanted to use the ng-change event in this scenario, then on your "getItem" event, you should access the model bound to the dropdown's ng-model called "item" as seen in your html markup.
you forgetting to alis your controller in your select
<select ng-model="vm.item" ng-change="vm.getItem()">
In controller
vm.getItem = function() {
console.log(vm.item)
or
console.log(this.item)
}
I have a ng-repeat iterating through an object of country names and country codes. I'm using ng-selected to preselect the USA (840) which works fine. However, when I introduce the ng-model (signup.user["country_code"]) to the select element containing the object I want to bind the selection to, the ng-select appears to be overridden by the signup.user["country_code"] property which by default is empty.
<select ng-model='signup.user["country_code"]'>
<option ng-repeat="country in signup.country" ng-selected='country["country-code"]=="840"' ng-value='{{country["country-code"]}}'>
{{country["name"]}}
</option>
</select>
So just for clearance the below version is successful in preselecting but is no good due to the lack of binding, the above version does bind just fine but ng-selected is overridden.
<select>
<option ng-repeat="country in signup.country" ng-selected='country["country-code"]=="840"' ng-value='{{country["country-code"]}}'>
{{country["name"]}}
</option>
</select>
Here is a snippet from my controller however I doubt it's that useful for solving this issue.
signup.user = {};
countryCodes.success(function(data) {
signup.country = data;
});
So just set country code initially in controller and use ngModel. You should also use ngOptions directive instead of ngRepeat:
signup.user = {country_code: 840};
HTML:
<select ng-model="signup.user.country_code"
ng-options="country['country-code'] as country.name for country in signup.country">
</select>
There's this website that I want to change how they display their dropdown menu.
http://i.stack.imgur.com/Wu718.jpg
I wanted to make it so that the default value is "Items for Sale", instead of "Forum Topics"
Here's their source code.
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
Since I don't really care about how it looks, I just want to change the value="topics" to value="s" even without changing the texts.
I've read some tutorials, but they mostly use IDs and Classes as a selector, in this case, how do I target this Select from many other in their website and change the value.
You can use:
$('select[name=sec]').val('s');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
I think this is what you're describing in the comments below:
var dropdown = $('select[name=sec]');
// change the s option to items
dropdown.find('option[value=s]').attr('value', 'items');
// change the topics option to s
dropdown.find('option[value=topics]').attr('value', 's');
// change the dropdown's value to s
// (first option should continue to be selected because its value is now s)
dropdown.val('s');
// (this is for demo purposes only)
dropdown.after($("<div>").text("New HTML is: " + dropdown[0].outerHTML));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
You can use the name or any other attribute.
for css
select[name="sec"]
or jquery
$('select[name="sec"]').
DEMO inspect element from your browser to see the changes
you can select a select dropdown list with select[name=sec] and select the first option with option:first
$('select[name=sec] option:first').val('s');
and if you need to change any of options just use .eq()
$('select[name=sec] option').eq(0).val('s'); // eq(0) for the first option element . eq(1) for the second option element ...
If you want to make selected an other option use this code:
$('select[name="sec"]').find('option:selected').removeAttr('selected');
$('select[name="sec"]').find('option[value="s"]').attr('selected','selected');
This script removes the default selection (the first option) and select the option which has "s" value. For the Demo:
$('select[name="sec"]').find('option:selected').removeAttr('selected');
$('select[name="sec"]').find('option[value="s"]').attr('selected','selected');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
You have to find this element in the DOM. For this you should find the first parent container element of the which has ID or CLASS attribute. From that element you can create a search for the element what you want by using the .find() method.
If there're more element which has name attribute with "sec" value you should build a chain of find which separate that you want. For that you can use these function templates:
$(#CONTAINER_ID).find(.SUBCONTAINER_CLASS).find(ELEMENT_TYPE);
$(#CONTAINER_ID).find(SUBCONTAINER_TYPE).find(OTHER_SUBCONTAINER_TYPE:eq(X));