Develop Reference

plain html combo box code

I've searched online and didn't find even one example of a combo box which could be rendered using plain HTML and Javacript.
Is it possible to have a combobox using standard HTML and Javascript? By combo-box, I mean where input is also possible and a drop-down options are also possible - in a single element. I'm not looking for one select box and in addition another input box.
An example of what I'm looking for is:
https://demos.telerik.com/kendo-ui/combobox/cascadingcombobox
However, I don't want to use any Javascript library like jQuery.

Seems you are looking for datalist.
datalist is an html5 component. This same feature can be created using input box and ul, li elements
<label for="countries">Choose a Country:</label>
<input list="countryList" id="countries" name="countries" />
<datalist id="countryList">
<option value="India">
<option value="France">
<option value="Isreal">
<option value="USA">
</datalist>

Dropdown with autocomplete + static values

I want to create a dropdown when you click on an icon where you can search through data. I will clarify this with an image:
You can type your quiz name on the .... rule.
Then in the second part of the dropdwon you will see the quizzes from the database depending on the search terms.
In the third part of the dropdown I want to show the last 5 surveys (this has to be static, not chaning when the search terms change).
In the fourth part of the dropdown I also want to show static values.
Is this possible to do with select2.js ?
Or can someone help me start with this? I don't really have a clue on how to begin with this. I know how you can show data according to the search terms. But it's the third and fourth part of the dropdown that I don't really know how to show also under it ...

you can use any dropdown api but if you want to autocomplete with static value you should use html5 form element "<datalist >"
here is example
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>

How do I determine if different sections of a checkbox dropdown menu are selected?

I have a multiselect dropdown menu where each option has a checkbox and more than one option can be selected at once. I'm using a jQuery multiSelect plugin generate the dropdown.
<select id="types" multiple="multiple" size="5">
<option value="">Show All</option>
#{
<option value="Gains">Gains</option>
<option value="Losses">Losses</option>
<option value="Adjustments">Adjustments</option>
<option value="Future">Future</option>
<option value="Deliveries">Deliveries</option>
<option value="Recoveries">Recoveries</option>
<option value="Full Payout">Full Payout</option>
<option value="Early Payout">Early Payout</option>
<option value="Charge Offs">Charge Offs</option>
<option value="Returns">Returns</option>
<option value="Transfers">Transfers</option>
<option value="Ins. Write-offs">Ins. Write-offs</option>
}
</select>
What I need to be able to do is separate the options into 2 sections. The first 4 in a section and the last 8 in a section. If an option is selected in one section, then any options that are selected in the other section are then unselected. This is already setup in a C# .NET application. I am having to replicate the functionality. I don't have access to the .NET code. At first I thought maybe I could put the different options into separate divs and just check whether an option was selected in each div but I get validation errors when I try to do that. I'm not really sure what else I could try. Any help with this would be great. Thanks.

try using classes, attach a jquery check box click(), check for class if ( $(this).hasClass("checkboxSection1") ) then uncheck all the other ones like so $(".checkboxSection2").prop('checked', false);
so some simple code is
$("myForm :checkbox").click( function(){
$(this).hasClass("checkboxSection1")?
$(".checkboxSection2").prop('checked', false):
$(".checkboxSection1").prop('checked', false);
});

How about giving them a set of classes e.g. 'option1' & 'option2', then you can do a little javascript/jquery to handle the logic of the selection process...

How to set the selected field of combo box within the view

I have two options in a combo box.
<select id="selLang">
<option value="/en" >english</option>
<option value="/fr" >french</option>
</select>
When i choose the second option the page is refreshed and the selected option isn't displayed in the top of the combo box (i mean, as the selected item.)
I want to set the selected option to be the selected option which is in the top of the combo box- within the view.
so my question is just how can i do it? or maybe i have to create a cookie? and if so -how do i do t-h-a-t?
Perhaps it's a silly question, but i'm quite new in this region.
Thanks in advance!

you need to set the selected attribute of the option. you can do it as follows:
<select id="selLang">
<option value="en" >english</option>
<option value="fr" selected="selected" >french</option>
</select>
Hope this is what you wanted..
see this

I'd recommend you taking a look at the ASP.NET MVC localization guide which will provide you with some nice ideas about how to implement this.

First, why when you choose the second option, the page is refreshed. Do you have any JavaScript function in action to post your form.
I ask that, because HTML <select> tag's change won't initiate an HTTP Post request. So, please update an explanation for that.
However, let's go back to your question. You can try this:
<select id='selLang' name='selLang'>
<option value="/en" >english</option>
<option value="/fr" >french</option>
</select>
This will cause the <select> tag to become a successful control during a POST request. This means that you can use this to create a script like:
$(function(){
$('#selLang').val('#HttpContext.Request["selLang"]');
});

How to access a form drop down from Javascript

Is there a way to access a drop down options text using JavaScript?
For instance I can access the value by doing:
document.getElementById("transFrom").value;
But I want the text between the option tags.
Here is the HTML of a form drop down:
<select name="transFrom" id="transFrom" style="width: 300px;" tabindex="1" onfocus="return validate_field(this)" onchange="return validate_field(this)">
<option value="">Select An Account</option>
<option value="S">Savings</option>
<option value="C">Checking</option>
<option value="M">Money Market</option>
</select>

try
document.getElementById("transFrom").options[document.getElementById("transFrom").selectedIndex].text

If you are interested, you could use jQuery:
$('#transFrom').val();
http://docs.jquery.com/Attributes/val
I (along with thousands of others) have found jQuery to be extremely useful for many simple and complex javascript calls/functions. It's a fairly small include file for the amount of benefit you get.