I am in an unfortunate position where I need to be able to copy entire blocks of HTML without the page reloading using javascript/jquery, including inputs and selects.
I have most of it working, but I'm stumped on the selects. In order for it to "copy" properly so the copy displays the selected value of where its copying from, I need to explicitly set the attribute "selected" on the copy from select. The problem is, if I change the value on a select that I will copy from, the previous selections "selected" attribute remains, and I don't know how to get rid of it.
Here is a link to the fiddle and below is the basic test to show you what I mean: fiddle. You'll need to inspect element on the select list and show all of the option tags.
Make a selection
Hit the Enter button
Observe the selected attribute go on the option you chose
Choose a different option
Hit the enter button
Observe that now two options have the selected attribute. At this point I need to get rid of the selected attribute from the step 3 observation
HTML:
<table>
<tr>
<td>
<select>
<option value="">Select One</option>
<option value="test1">Test1</option>
<option value="test2">Test2</option>
<option value="test3">Test3</option>
<option value="test4">Test4</option>
</select>
</td>
</tr>
</table>
<button onclick="enterTest()">Enter</button>
Javascript
function enterTest(){
var $selectedOption = $("select").children(":selected");
$selectedOption.attr("selected","selected");
}
No need to deal with options and selected attribute.
If the values are unique,
var $select = $("select");
function enterTest(){
$select.clone().val($select.val()).appendTo('body');
}
Demo
Otherwise, use selectedIndex:
$select.clone().prop('selectedIndex', $select.prop('selectedIndex'))
Demo
Related
I have a datalist that is created on the fly based on the user's selection from a group select menu. After the group is selected, the datalist is created. The datalist allows users to choose from a "dropdown" list or just start typing in the input box and have the list filtered accordingly. It is structured like this:
<div id="projectSelect">
<input type="text" name="ProjTitle" id="ProjTitle" placeholder="~ select project ~" list="projectList" autocomplete="off" value="">
<datalist id="projectList">
<select id="projectOptions">
<option data-projid="390" value="Project 1">Project 1</option>
<option data-projid="391" value="Project 2">Project 2</option>
<option data-projid="392" value="Project 3">Project 3</option>
</select>
</datalist>
</div>
In the default use case, the user double-clicks on the input box, a drop down appears, a project is selected (clicked) and the rest of the page (a report) is populated. This all works great.
In the alternate use case for the page, the groupid and a particular projid are passed to the page via a stored browser value.
In this case, the presence of the 'groupid' triggers the group selector just fine and the datalist element is populated just as if the user had made the group choice. All good so far.
What I'm having difficulty doing is interacting with the datalist via jquery to select the item matching the projid that is passed AND displaying the resulting title of the project in the input control. The title of each project is the "value" of each option.
From lots of other references I've found, the way to select an item in a datalist is to actually set the value of the associated input like this:
$('#ProjTitle').val("Project 1");
This doesn't work in my case, because the value being passed to the page is the projid that is in the data-projid value for each option and not the project title that is the "value" of each option.
One approach I thought of using for this was to select (using jQuery) all of the datalist options and then use $.each() to loop over the items and find the matching projid. If I could do this, I would then get the valueof that option and pass it to ('#ProjTitle').val().
However, when I use jQuery to select the options like this:
let $options = $(document).find('option');
$options is empty.
Are the options for a datalist not accessible with jQuery for some reason? in the Firefox developer tools the options are greyed out as if they are hidden. If they can not be accessed directly, how can I get the "value" of the option that matches the projid?
What other approach could I use to set the selected value of the datalist (based on the projid)?
Edit
I am suspicious that the dynamic loading of the content is in play here. The code to set the datalist is inside the $(function() { }) block of javascript so execution occurs after page load. Nonetheless, if I add console.log($('#ProjectList')); (or '#ProjectSelect') to the javascript I get the following in Firefox Developer Tools:
Normally, I'd be able to access all the nodes for the element.
I think the comments in the demo are sufficient to explain things, but feel free to ask any questions if you need a more details.
/* Assume this is the id passed to your page: */
const projid = 392
/*
Select the option element with a matching data-projid attr
and store the actual value for the selected option.
*/
const val = $(`[data-projid="${projid}"]`).val()
/*
Select the input that is a direct descendant of the
#projectSelect element and set the value for it
to the project name
*/
$('#projectSelect > input').val(val)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<div id="projectSelect">
<input type="text" name="ProjTitle" id="ProjTitle" placeholder="~ select project ~" list="projectList" autocomplete="off" value="">
<datalist id="projectList">
<select id="projectOptions">
<option data-projid="390" value="Project 1">Project 1</option>
<option data-projid="391" value="Project 2">Project 2</option>
<option data-projid="392" value="Project 3">Project 3</option>
</select>
</datalist>
</div>
Given the following jQuery plugin: http://selectric.js.org/index.html which replaces the functionality of that of a regular select box by using custom UL LI lists,
Based on the plugins documentation, I know that you can programmatically select an option value if you already know the index to select by using the following code:
$('#idofselectbox').prop('selectedIndex', 3).selectric('refresh');
But they do not include a sample to be able to find and select an option value by a value.
For example,
Let's say i'd like to select the option value named 'apples' without actually knowing its index in the select box. Is this even remotely possible?
<select id="idofselectbox">
<option value="oranges">oranges</option>
<option value="pears">pears</option>
<option value="apples">apples</option>
<option value="strawberries">strawberries</option>
</select>
You can set the value as if it's a regular combo box, then call refresh on selectic to refresh the UI.
$('#idofselectbox').val('apples').selectric('refresh');
Is it possible to set the selected option of a form via a previous selected option in an other form?
The select option is like this, here 60x60 is selected.
<select id="pa_afmetingen-vierkant" name="attribute_pa_afmetingen-vierkant">
<option value="">Kies een optie…</option>
<option value="m001">40x40</option>
<option value="m002">50x50</option>
<option selected="selected" value="m003">60x60</option>
<option value="m004">70x70</option>
<option value="m005">80x80</option>
<option value="m006">100x100</option>
<option value="m007">125x125</option>
<option value="m008">150X150</option>
</select>
This form gets send to a new page, on this new page there is an exact duplicate of this form, I want this duplicate form to have the same option selected as was selected in the previous page.
My best bet would be to store the option in a variable , and via javascript select the option that matches the stored variable.
The form is submitted via POST
I don't really know what variable to use, nor how to target the option.
Solutions requiring Jquery are not a problem.
Kind regards,
There are a few ways of implementing it.
One solution could be that you get the selected option in JS and pass it to the url like http://www.myurl.com?selectedOption=3. Then at the other page you could get that selected and trigger a select to your menu to select that value.
Get Selected Option's value
var selectedOption = $('#pa_afmetingen-vierkant option:selected').attr('value');
Retrieve Selected Option's value from URL
Refere Here
Set Selected Option in the NEW select menu
$('#pa_afmetingen-vierkant-NEW option[value='+ selectedOption +']').prop('selected', true);
Another solution could be that you store temporary the selectedOption in the localStorage and then you delete it from there.
html code:
<select>
<br>
<option>1</option><br>
<option>2</option><br>
</select>
This select will default display the first option item(display 1).
Now i want to change select to display the second item by jquery when dom is ready, but i tried several times, all failed.The following is my attempt:
$('select').prop('selectIndex', 1);
$('option').eq(1).attr('selected', 'selected');
$('option').eq(1).prop('selected', true);
default set select's style to 'display:none' in html code, then try above three ways and finally invoke $('select').show()
Maybe, i am only setting the dom value, not tell browser to refresh 'select'.
Do you konw the other way to refresh default display option in select?
You have to add values to your options from select.
<select>
<option value="1">First</option>
<option value="2">Second</option>
</select>
Then, just set the value "2".
$("select").val("2");
Or, you can do this simply setting the second value from select.
$("select").val(2);
See the working example here.
This is enough
$("select").val(2);
i think you want to select option 2 when page is load.
<select>
<option>1</option>
<option selected="selected">2</option>
</select>
I have a select that looks like this:
<select id = "baz"
name = "Baz"
size = 1>
<option value="A1"> foo</option>
<option value="A2"> bar</option>
...etc
<option value="A99"> bat</option>
</select>
I've pulled this code from Firebug (and edited it), as the options themselves are read from the server by a CGI #include.
The value of the select is eventually read by JavaScript as follows:
var $input_baz = $("#baz");
...
var baz_pl = $input_baz.val();
Problem: the select is in a hidden div, and no selections have been made, but baz_pl contains the value A1. Why is .val() returning the first entry when nothing has been selected, and is there a simple fix for this? The select appears in a popup, and I can add code to detect if the popup 'Ok' button has been clicked, but I'd rather do it properly if possible.
The first option is always selected by default. You could add a dummy entry as first one, with a value that does not occur otherwise in the list.
For example:
<option value="-1">-- Please select --</option>