Capybara select option not working - html

I've tried numerous ways to try and my capybara test to select an option from this form.
<select id="mapping_midi_controller_id" name="mapping[midi_controller_id]"><option value="17">MIDI Fighter Classic</option>
<option value="18">MIDI Fighter Pro</option>
<option value="16">Traktor Control S2</option>
<option value="15">Traktor Control S4</option>
<option value="19">VCI-100</option>
<option value="0">Other ...</option>
</select>
I've tried
1)page.select "VCI-100", :from => "mapping_midi_controller_id"
2)select "19", :from => "mapping_midi_controller_id"
Any thoughts?

I think the second command should be:
select "VCI-100", :from => "mapping_midi_controller_id"

Related

Select value from "option value" select

Hope someone can help as this is a new one on me.
I'm trying to extract the "option value" from a particular location.
E.g. in the example below, I want to get the 2.0000 from "Ashton".
The HTML is
<div class="store-stock-select">
<select name="storestock" id="storestock" onchange="showMessage()">
<option value="">Check Store Stock</option>
<option value="2.0000">Ashton</option>
<option value="1.0000">Ballymena</option>
<option value="0.0000">Banbridge</option>
<option value="2.0000">Bangor</option>
<option value="0.0000">Bedford</option>
<option value="1.0000">Belfast</option>
<option value="1.0000">Blyth</option>
<option value="0.0000">Bolton</option>
<option value="0.0000">Bridgwater</option>
<option value="1.0000">Bristol</option>
...and the VBA I've tried so far is
Set dropOptions = HTML.getElementsByTagName("select")
For Each o In dropOptions.Options
If o.innertext = "Ashton" Then sh01.Cells(r, 5) = o.Value
Next
But to no avail. :(
If anyone could help me with this I would be so very grateful.
Thank you in advance.
Ian
You can use CSS selectors
HTML.querySelector("#storestock option + option[value]").value
Also,
HTML.querySelectorAll("#storestock option").item(1).Value

Multiselect with selected values

I have a multiselect box and this belongs to a user or user access
When I try to edit user, which has prevous access selected
The code to generate select is:
selected_access = [1,2,3]
<%= select_tag :user_access, options_from_collection_for_select(user_accesss, 'id', 'name', selected: selected_access),{ :multiple => true } %>
I get a multiselect with already selected items:
<select name="user_access[]" id="user_access" multiple="multiple" size="219">
<option selected="selected" value="1">dashboard</option>
<option selected="selected" value="2">profile</option>
<option selected="selected" value="3">home</option>
<option value="4">account</option>
<option value="5">users</option>
<option value="6">admin</option>
<option value="7">contact</option>
</select>
When I try to select another set of items. I get a combination of both sets?
so when I submit my form after selecting account I get
[1,2,3,4]
I expect to get only
[4]
Does anyone know what is going on?
I'm using Ruby on Rails to select the already selected item using
selected: [1,2,3]
Thanks

CakePHP 3 - populate select dropdown with data from custom table

So I started looking at CakePHP, and I'm just doing a few test cases to see if CakePHP will cater for all my needs.
I have a custom table (Table name: roles):
id role sub_site
1 Role 1 0
2 Role 2 0
3 Role 3 0
4 Role 4 0
5 Role 1 1
In my controller (User controler) I have the following code based on all the feedback here.
$this->loadModel("roles");
$rolesList = $this->roles->find('list', array(
'conditions' => array('sub_site' => '0'),
'fields' => array('id', 'role')
));
$this->set(compact('rolesList'));
I have the following in the view
$this->Form->input('role', array('label'=>false,
'div'=>false,
'type'=>'select',
'empty'=>'-- select one --',
'options'=>$rolesList));
Yet the output looks like this:
<select name="role" required="required" id="role">
<option value="">-- select one --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
All I want is the output as follows:
<select name="role" required="required" id="role">
<option value="">-- select one --</option>
<option value="1">Role 1</option>
<option value="2">Role 2</option>
<option value="3">Role 3</option>
<option value="4">Role 4</option>
</select>
Please indicate what is wrong here as this is suppose to be simple to just populate?
I am getting results using this method. In my controller:
$articles = TableRegistry::get('Transfers');
$make=$articles->find('list', ['keyField' => 'id','valueField' => 'make']);
$this->set('make',$make);
and then in view:
echo $this->Form->input('make',['type'=>'select','options'=>$make ,'empty'=>'-Select Make-','class'=>'form-control','templateVars'=>['class'=>'col-md-4']]);
Hope you will get results.

How can I add an ID to an option inside a grouped_collection_select

I currently have a Multi Select Box that groups Rooms with their respective Building.
Everything works great, except, I would like to add an ID to each option.
How can I do this?
FORM
<div class="form-group">
<%= f.grouped_collection_select(:room_ids, Building.order('name ASC'), :rooms, :name, :id, :name, {include_blank: false}, {multiple: true, size: 10, :class => "form-control"}) %>
</div>
HTML
<select multiple="multiple" size="10" class="form-control" name="key[room_ids][]" id="key_room_ids" data-parsley-multiple="key[room_ids][]" data-parsley-id="5221">
<optgroup label="Accounting Library">
###Is their a way to add an ID to this so I can manipulate it with javascript?
<option value="142">105</option>
<option value="143">105A</option>
</optgroup>
<optgroup label="Ahmanson Center">
<option value="721">fad</option>
<option selected="selected" value="144">105B</option>
</optgroup>
</select>
I don't believe there is any way to add an id to each option using grouped_collection_select, but you can easy select an option using jQuery. For example to select the option with value = '721' use the following selector:
$('#key_room_ids option[value="721"]')

HTML select dropdown list

I want to have a drop down list using the select, option tag... but when it first appear I want it to have an information, such as "Please select a name" then the user clicks on the drop down list and selects from the available option... I tried to made the "Please select a name" as an option, but then the user will be able to select this... which is not what I want. Do I need to use javascript to have this feature or what do I need to do?
If there'a jquery way to do this, this would be much helpful
Try this:
<select>
<option value="" disabled="disabled" selected="selected">Please select a name</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
When the page loads, this option will be selected by default. However, as soon as the drop-down is clicked, the user won't be able to re-select this option.
<select>
<option value="" style="display:none">Choose one provider</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
This way the user cannot see this option, but it shows in the select box.
Have <option value="">- Please select a name -</option> as the first option and use JavaScript (and backend validation) to ensure the user has selected something other than an empty value.
This is an old post, but this worked for me
<select>
<option value="" disabled selected>Please select a name...</option>
<option>this</option>
<option>that</option>
</select>
<select name="test">
<option hidden="true">Please select a name</option>
<option value="Cash">Cash</option>
<option value="Draft">Demand Draft No.</option>
<option value="Cheque">Cheque No.</option>
</select>
Maybe this can help you resolve without JavaScript
http://htmlhelp.com/reference/html40/forms/option.html
See DISABLE option
Simple, I suppose. The onclick attribute works nicely...
<select onchange="if(this.value == '') this.selectedIndex = 1; ">
<option value="">Select an Option</option>
<option value="one">Option 1</option>
<option value="two">Option 2</option>
</select>
After a different option is selected, if the first option is selected, Option 1 will be selected. If you want an explanation on the javascript, just ask.
<select>
<option value="" disabled="disabled" selected="selected">Please select name</option>
<option value="Tom">Tom</option>
<option value="Marry">Marry</option>
<option value="Jane">Jane</option>
<option value="Harry">Harry</option>
</select>
If you want to achieve the same for the jquery-ui selectmenu control then you have to set 'display: none' in the open event handler and add '-menu' to the id string.
<select id="myid">
<option value="" disabled="disabled" selected="selected">Please select name</option>
<option value="Tom">Tom</option>
<option value="Marry">Mary</option>
<option value="Jane">Jane</option>
<option value="Harry">Harry</option>
</select>
$('select#listsTypeSelect').selectmenu({
change: function( event, data ) {
alert($(this).val());
},
open: function( event, ui ) {
$('ul#myid-menu li:first-child').css('display', 'none');
}
});
I'm sorry to necro an old post - but I found a better way of doing this
What I believe this poster wanted was :
<label for="mydropdown" datalabel="mydropdown">Country:</label>
<select name="mydropdown">
<option value="United States">United States</option>
<option value="Canada">Canada</option>
<option value="Mexico">Mexico</option>
<option value="Other">Not Listed</option>
</select>
I found this information in another post while searching for this same answer - Thanks
<select>
<option value="" disabled selected hidden>Select an Option</option>
<option value="one">Option 1</option>
<option value="two">Option 2</option>
</select>
Make a JavaScript control that before the submit cheek that the selected option is different to your first option
This is how I do this with JQuery...
using the jquery-watermark plugin (http://code.google.com/p/jquery-watermark/)
$('#inputId').watermark('Please select a name');
works like a charm!!
There is some good documentation at that google code site.
Hope this helps!
<select>
<option value="" disabled="disabled" selected="selected">Please select a
developer position</option>
<option value="1">Beginner</option>
<option value="2">Expert</option>
</select>
From what I understand, you are looking for a placeholder for your select options, which has to be selected when no value is pre-selected, and cannot be selected by user, or seen.
<select name="selectOne">
<option value="" disabled selected hidden>Choose an option</option>
<option value="this">This</option>
<option value="that">That</option>
</select>