Dropdown form field - javascript

With JavaScript is it possible to have a drop down menu display a form field with an input type of text, instead of a list option? Could I get a jsfiddle demo example?

I recommend using JQuery to do this? Basically hide and show a div with all your input fields on it. This way you can create the illusion that it's a native dropdown. A standard dropdown does not support custom markup. There are aloso third party alternatives for "custom dropdowns" I suspect they are all implemented using some variation on what I suggested above...

Of course it is possible, but I doubt it is possible using a common <select> element. You should probably create a <div> consisting of several inputs (i.e. <input type = "text">).
Then you'll have a button (with a down-pointing arrow image :) ) and to its onclick event, you'll bind a function that shows your <div>. To hide the <div>, you can bind the hiding function to a click on the background or another click on your button.
To add some elegancy and create a dropdown effect while showing the <div>, you can set its height to 0 and then continually increment it with a timer.

Related

is it possible to change an element on responsiveness?

just wondering if it's possible to change a div to an input at a certain breakpoint?
I have a div that contains some names in and then when I switch to mobile, I want this div to become editable so I can change the names.
I guess I have 2 options, change the element type or make the onChange function only applicable on mobile.
is either possible?
can post code but essentially just want a guide or solution how to do this
First, to detect a mobile browser, you can use
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
Then, on your page, use two elements - the div and the input (or a textarea) and just keep one of them hidden at all times. It seems like you want to listen for a click on the DIV to enable the INPUT, or? And you'll want a key listener on the input to update the DIV as well as another listener to handle hiding the input field and showing the DIV again

Detect focus loss for input element, not onBlur

I'm implementing an autocomplete/combobox in dart. I'm using two elements for this, a <input type="text"> and a <ul> for the suggestions. I want to hide via css style display: none whenever the user leaves the input box. This works when using onBluron the input element.
If the user tries to click an item in the <ul>, the input looses focus and the <ul>is hidden before the click event on the <li> is run.
_listElement = new UListElement();
_textElement = new TextInputElement()
..onBlur((e) => setDisplayToNone(_listElement)); // hide element
I noticed that a jQueryUI implementation does not have this issue and I can not figure out how they detect when to hide the suggestion box. see https://jqueryui.com/autocomplete/
What alternate way can i use to hide the <ul> without hiding it on _textElement.onBlur?
If it helps, the two elements are always wrapped by a <div>. I'm looking for a dart-only solution, although vanilla-js answers that I can rebuild in dart are also appreciated.
Please look at events sequence:
input.focus
li.mousedown
input.blur
li.mouseup
li.click
So you might setup a flag variable, turn it up on li.mousedown, check it on input.blur and decide if you need to hide the list, and then turn it down on li.click

jQuery select on div content

I am making a small text editor, and for that, I would like a similar effect when a user selects some text as here: http://raphaelcruzeiro.github.io/jquery-notebook/
I was thinking of using the jQuery select event, but I can't seem to get it working on divs, only on input fields.
<!--<input type="text" class="writing-area" value="foo bar">-->
<div class="writing-area">foo bar</div>
<script>
$(".writing-area").select(function(){
alert("Text marked!");
});
</script>
You can see a demo here: http://jsfiddle.net/WL2nz/
The outcommented HTML works just fine, but the div version does not.
What am I doing wrong? Can select not be used on divs?
The MDN reference for the select event says that the HTML5 spec only defined the select event for inputs and textareas.
In accordance with jQuery docs, "this event is limited to fields and boxes".
From the jQuery page (http://api.jquery.com/select/) for the .select() function:
"The select event is sent to an element when the user makes a text selection inside it. This event is limited to fields and boxes."
To get the effect you are look for, have you considered onmouseover or onclick with a clickable element?
In addition, the Dojo Toolkit is one place where you can get a nice tooltip to craft something similar to what you are looking for: click here
All answers are correct, but the plugin you have linked to, does it this way:
After using the keyboard or the mouse (keyup,focus,mouseup...) the plugin checks if something is select. If something is selected the bubble pops up.
The code is here
we highlighted the color of div text when hovers it and remove the color while non-hover the text.
$(".writing-area").hover(function(){
$(".writing-area").css('color','red');
},function(){
$(".writing-area").css('color','');
});
http://jsfiddle.net/WL2nz/4/

change form based on drop down menu selection

I'm having trouble finding javascript, HTML and/or CSS code that'll change the form based on the drop down menu. For example, the form is for adding a property and the drop down menu selections are single family, condo, apartment but they each have their own set of text boxes, menus and radio buttons. How can I achieve this?
What I have understand from your query is that , you have a from with some fields and you have a dropdown and you want that when ever your change selection in dropdown the form fields values must change accordingly right ?
If that is the issue , then it is very simple , first catch onSelectionChange event of dropdown and try to get selected value and once you get the selected value fill form fields by accessing them accordingly in a condition.Thanks
So I actually already had a piece of code I was fumbling with (http://jsfiddle.net/CYzsY/) for this question and it looks like its not working for me because its based on jQuery 1.7.1 and I'm linking to 1.10.2 in my code. Will make a new post accordingly. Thanks everyone!

How can I choose a select option in jQuery as though it were clicked with the mouse?

I am building a search tool with various select drop downs that populate with options via AJAX. The possible options populated are based on the the option chosen in the preceding select drop down. For the purpose of this tool, I want to have the first select box hidden but still need to select an option in that box so that it triggers the AJAX call on the following box, something that is supposed to happen as the result of an "onchange" event.
I've tried all kinds of different code to simulate a mouse click selection of a particular option but, while I can get the option selected, it still isn't triggering the event properly to set off the AJAX call in the following select. This is as far as I've gotten:
jQuery('#form select').first().val('the-value').trigger('click').trigger('change');
From everything I've read, that should set the option value and trigger a change event much like clicking the option. Still, this isn't working. Thanks!
You only have to use val(), like any other field...
$("select").val("2").change();
http://jsfiddle.net/Loenix34/3LbjY/
We also use change() to call associated events.
Instead of setting the value of the select, set the selected property of the given option, and then trigger a change.
$("option[value='the-value']").prop('selected', true);
$("#form select:first").change();
Fiddle Demo

Categories

Resources