How to set a default value for a select element? - javascript

I have a select element in HTML. I save just selected value in DB. When I want to edit this element in users side , I need to show value that selected before. I see this link. but in this link user himself determines default value,while I want to have an editable select element.
I should first retrieve selected value from DB , then set it as default value to my select element. how can I do it in JavaScript?

Related

Prepopulate dropdown with query script - Javascript Shareflex

I have a dropdown with 4 options. I want these options to be prepopulated depending on value that is selected from a different field. The different field is a "countries" field.
If country "A" or country "b" is selected, I want the dropdown to populate option 1.
If a different country, populate option 2.
Thanks in advance
You can try the following:
Find which event is fired when a user change the first dropdown value
Register a function to this event
In this function, detect what is the new input from the first dropdown. Check it, and change the value of the second dropdown depending on this check (How do I programmatically set the value of a select box element using JavaScript? could be useful for the implementation)
If you have issue trying to do it, do not hesitate to ask :)

how to use querySelector on data-id and input type

I want to set className for 2 input types, first is an input box and other is a button. Initially, both are hidden, and on click of a button, I want to show both of them. The catch here is that there are multiple grids being displayed (one for each record) and depending upon where the click happened, I'll be displaying their respective input box and button.
Now, I'm using below to display the input box:
this.template.querySelector(`[data-id="${targetId}"]`).className = "show";
I'm populating the data-id attribute on input type with record specific value to differentiate where the click occurred.
Now, if I want to hide the button, I'll have to use a similar statement, but I need to still use data-id attribute value. How can I use both data-id and type ="button" with querySelector?
This works with "document.querySelectorAll", not positive about "this.template.querySelectorAll".
I am assuming that the input fields are always in the same order (input,button) and that they both have the same "data-id" value. And that it is unique to them (there are only two objects with this data-id value on the page).
onclick='x=this.template.querySelectorAll(`[data-id="targetId"]`);x[0].type="text";x[1].type="button";'

Retrieve data table cell values to select option box

I am trying to retrieve data table cell values to input and select option boxes. The values are displaying in the input box but it fails to display in option select box.
$("#txt_UserName").val(table.cell('.row-modified', 3).data());
$("#dd_Country").select2(“val”, table.cell('.row-modified', 2).data());
Selects don't have value properties. You need to find the matching option element underneath the select and set its selected property (while ensuring all other options do not have selected set).

Using div's instead of select's

Hello I've implemented a custom select following this instructions:
http://www.onextrapixel.com/2012/06/20/create-a-custom-select-box-with-jquery/
It is based on using div's and span instead of select's and option. My question is, how can I make the form get this values?
Do I need to make hidden select and assign to it the div-select value every time?
Add a hidden input somewhere in form, say
<input type="hidden" name="foo">
Then add this line to the jQuery snippet
$(this).find('span.selectOption').click(function(){
$(this).parent().css('display','none');
$(this).closest('div.selectBox').attr('value',$(this).attr('value'));
$(this).parent().siblings('span.selected').html($(this).html());
$('input[name="foo"]').val($(this).html());
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
});
Basically, whenever an option is clicked it will update the field named "foo" which stores the name of the selected option.
You can use a hidden select that matches the selected value, or just a hidden input with the updated value. Either way, to be included in the form submission, it must be a input, textarea or a select with a name attribute.

reset dropdown control to default value using javasccript

i have div tag inside the div tag i have an drop down control which is binded to the database values
https://stackoverflow.com/questions
--select--
india
us
Auz
i have an checkbox control once i check then this the div tag will be visable uncheck the checkbox theen div tag will be invisable.
if the user select some value in the dropdown control like "AUZ" again if user checks or unchecks the checkbox it should always show first value "--select--"
hope my Question is clear
can any one give the syntax how to achieve, any help would be appreciated.
Thanks
To reset your dropdown, select its first option, and set the selected attribute to true.
$("#yourSelectId option:first").attr("selected", true);

Categories

Resources