I have a simple search form_tag in a Rails 4 app.
One of the options is a select_tag:
<%= select_tag "plottable[plottable_id]", options_for_select(Plottable.all.map{ |plottable| [ plottable, plottable.id, { 'plottbale-type' => plottable.class } ] }), prompt: 'Select one option'%>
The HTML is generated properly, resulting in:
<select name="plottable[plottable_id]" id="plottable_plottable_id">
<option value="">Select one option</option>
<option plottable-type="Pool" value="3">Pool1</option>
<option plottable-type="Pool" value="4">Pool2</option>
<option plottable-type="Asset" value="33">Asset1</option>
<option plottable-type="Asset" value="34">Asset2</option>
</select>
When submitting the form the plottable-type does not get submitted. Here are the params:
Parameters: {"utf8"=>"✓", "from_time"=>"", "to_time"=>"", "plottable"=>{"plottable_id"=>"35"}, "commit"=>"Search"}
Thanks for your suggestions.
Just try this:
<select name="plottable[plottable_id]" id="plottable_plottable_id">
<option value="">Select one option</option>
<option plottable-type="Pool" value="3">Pool1</option>
<option plottable-type="Pool" value="4">Pool2</option>
<option plottable-type="Asset" value="33">Asset1</option>
<option plottable-type="Asset" value="34">Asset2</option>
</select>
<input type="hidden" name=plottable[type] value="", id="plottable_plottable_type">
$('#plottable_plottable_id').on('change', function(){
var type = $('option:selected', this).attr('plottable-type');
$('#plottable_plottable_type').val(type);
})
you can add hidden field tag by rails code as well
<%= hidden_field_tag "plottable[plottable_type]"%>
Related
I have a React component which renders a combobox (another external component) with an option. When deployed the component does work as expected.
<select class="country-select"
id="nationalityCode" name="nationalityCode" required="">
<option value="" disabled="" hidden="">Choose</option>
<optgroup label="Most used">
<option value="0052">Belgium</option>
<option value="0055">German Citizien</option>
<option value="0057">French</option>
<option value="0001">Dutch</option>
</optgroup>
<optgroup label="Alle Nationalities">
<option value="0052">Belgium</option>
<option value="0055">German Citizien</option>
<option value="0057">French</option>
<option value="0001">Dutch</option>
<option value="0050">Albanese</option>
<option value="0223">American Citizen</option>
</optgroup>
</select>
When using testing library userEvent.selectOptions, the select of an option is successfull. Only the expect fails with
Error: expect(received).toBe(expected) // Object.is equality
Expected: true
Received: false
When debugging the selection state for all options it shows that the initial selected option is selected.
if (changeValue.nationaliteit) {
const selectOption = screen.getAllByRole('option', { name: 'French' })[0];
await userEvent.selectOptions(
screen.getByRole('combobox', { name: 'Nationaliteit' }),
selectOption
);
expect(
(screen.getAllByRole('option', { name: 'French' })[0] as HTMLOptionElement).selected
).toBe(true);
}
Using
"#testing-library/user-event": "^14.4.3",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^12.1.5",
CromeVox screen reader reads wrong options length for select.
Technically right, but not what I need.
<select name="month" id="month">
<option value="" disabled selected style="display: none;">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
It reads "combobox two of thirteen"
How to tell screen reader to not read list length at all or force it read "combobox two of twelve"?
https://jsfiddle.net/mrs_kva/5wk6xjt9/
I cant remove empty option.
UPD:
on w3.org presented example have this issue too
see here.
Despite there are 12 fruits in select reader says "13"
I have an existing select with 5 options and a default blank value. I want to add an optgroup to the first 3 values and another optgroup to the last two options.
<select id="cityDropdown">
<option selected="selected" value="" label=" "> </option>
<option value="1000">Tokyo</option>
<option value="1001">Kyoto</option>
<option value="1002">Osaka</option>
<option value="1003">Incheon</option>
<option value="1004">Busan</option>
</select>
I want my select to look like this
<select id="cityDropdown">
<optgroup label="Japan">
<option value="1000">Tokyo</option>
<option value="1001">Kyoto</option>
<option value="1002">Osaka</option>
</optgroup>
<optgroup label="SoKorea">
<option value="1003">Incheon</option>
<option value="1004">Busan</option>
</optgroup>
</select>
Below is my existing code which no longer works since the values are no longer even.
$(document).ready(function() {
var select = $('#cityDropdown');
var opt1, opt2;
$('option', select).each(function(i) {
if (i % 2 === 0) {
opt1 = $(this);
} else {
opt2 = $(this);
var optgroup = $('<optgroup/>');
optgroup.attr('label', label);
opt2.add(opt1).wrapAll(optgroup);
}
});
});
I have an HTML page with a department selectbox. when end user selects any department I have no show him the no of employs in that department. The employee collect
<select multiple="" class="chosen-select choice" id="form-field-select-4" data-placeholder="Choose a Department..." onchange="show_employee_count(this.value)">
<option value="Management">Senior Management</option>
<option value="Legal">Legal</option>
<option value="Operations">Operations</option>
<option value="Administration">Administration</option>
<option value="R&D">R&D</option>
<option value="Sales & Marketing">Sales & Marketing</option>
<option value="Finance">Finance</option>
<option value="Technology">Technology</option>
<option value="Customer Service">Customer Service</option>
<option value="Pro Services">Pro Services</option>
<option value="HR">HR</option>
</select>
The count of employee to show in this container div
<div id="emp_count"></div>
I have tried this as :
HTML
<select name='department' id='department'>
<option value="Management">Senior Management</option>
<option value="Legal">Legal</option>
<option value="Operations">Operations</option>
<option value="Administration">Administration</option>
<option value="R&D">R&D</option>
<option value="Sales & Marketing">Sales & Marketing</option>
<option value="Finance">Finance</option>
<option value="Technology">Technology</option>
<option value="Customer Service">Customer Service</option>
<option value="Pro Services">Pro Services</option>
<option value="HR">HR</option>
</select>
<div id="leads_coount"></div>
JS Code
<script type="text/javascript">
$(function(){
$("#department").change(function(){
var selectedDepartment = $(this).find(":selected").val();
console.log("the department you selected: " + selectedDepartment);
$.ajax({
type: "POST",
url: "ajax.php",
cache: false,
data: { method: "get_lead_count", department: selectedDepartment }
})
.done(function( leads ) {
$( "#leads_coount" ).html(leads);
}).fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
});
});
</script>
ajax.php
<?php require_once('DataAccessBean.class.php');
if($_POST['method'] == 'get_lead_count') {
// select a collection
$collection = new MongoCollection($db, 'employs');
// find the collections with department
$clause = array('Department' => $_POST['department']);
$cursor = $collection->find($clause)->count();
echo 'There are '.$cursor.' employees available in this department';
//echo $_POST['department'];
}
Is there a better way to do?
Im a bit of a jQuery novice.
I have 5 options in a drop down menu.
I want to add a class in a div depending on which option is selected.
This class will then change the layout of the content using CSS.
Here is an example if it helps!
Thanks
<form>
<select>
<option id="1">layout 1</option>
<option id="2">layout 2</option>
<option id="3" selected>layout 3</option>
<option id="4">layout 4</option>
<option id="5">layout 5</option>
</select>
<div class="3">styled content</div>
</form>
You can use the ".attr()" to set the class attribute of the div onchange.
You're best to change the option id to value first. then:
$("select").change(function() {
$("div").attr("class", $(this).val());
});
(EDIT) Change it to:
$("select#np_blog_layout").change(function() {
$("div#changebox").attr("class", $(this).val());
});
What 'rudeovski ze bear' said, but if you still want to set it to the div's class to the selected elements id, here it is.
$('select').change(function() {
$('div').attr('class', $(this).attr('id'));
});
First off, you don't have to use id to your options. Put the values in value attribute. Put ID to your div and select so you can select them using jQuery.
<form>
<select Id="selectElement">
<option value="1">layout 1</option>
<option value="2">layout 2</option>
<option value="3" selected>layout 3</option>
<option value="4">layout 4</option>
<option value="5">layout 5</option>
</select>
<div id="styledContent" class="3">styled content</div>
</form>
On JS
//Attach event handler to select element's onchange event
$('#SelectElement').bind("change",changeStyle);
//The event handler
function changeStyle()
{
//Set class to selected value
$('#styledContent').class($('#SelectElement').val());
}