Add option to select box

JavaScript
1

I just saw an example of a select box where you could add an option by typing an not existing option in the select box it self and by clicking a submit button it was added to the database as well. I saw many examples where you could add an option by declaring a new option in in a function:


function myFunction()
{
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = "Kiwi";
x.add(option);
}

and I fugured myself something with a separate textfield and a insert query.

Does anyone know about such a functionality?

2

I don’t, but it seems pretty straightforward. You could use an AJaX call to a server-side script to add it to the database, then reload the select. Are you using jQuery? If not, it should still be simple if you make your own XHR.

3

The question is not how to inser the value into the database, the question is how to get a text input field integrated in the select box

4

Sorry… when you stated “I fugured myself something with a separate textfield and a insert query”, I assumed you already had something in mind as far as function.

I think what you’re describing is a turnkey solution that I cannot remember the name of. It was used (sparingly) on a project that I worked on, last year. Might be jQuery-UI.

5

Yes you are richt. I think I can use jquiry-ui along with ui.combobox.js I am just stuggling now to make that work with dynamic content, but thanx anyway

6

If I remember correctly, you don’t have to do anything different as the style applied to the select after it’s loaded is what gives the text input combined with the select. If you put the select into a separate file and use jQuery to load it, then refreshing it would simply be a matter of re-.load()ing the included file.

Then, again, I’m not eyeballing your code other than what you’ve provided in your first post. You may have it set up differently than I’m thinking.

7

There is no reason to use document.createElement for adding options when JavaScript actually has a built in function that adds the entire option tag with value and text all in one go

Here is how you could write it (note that val should have the value for the option substituted - which is missing from your original code).

function myFunction()
{
var x = document.getElementById("mySelect");
x.optionsx.options.length] = new Option('Kiwi', val);
}
8

What I am actually looking for Stephen is something similar as autocomplete in a select box only without the autocomplete functionality. In other words. I have a select box if the value is not presented in the selectb box, the user should be able to type in a new value and press a submit button so the just entered value will be added to the database.

9

So more of an auto-suggestion?

The standard jQuery autocomplete has a [url=“http://jqueryui.com/autocomplete/#remote”]remote datasource option, so that when a user submits something else, that can be incorporated in to other autocompletes that people see.

$$$ SUPER LOOSE SLOTS WIN WIN WIN BINGO LLC $$$

Be warned though - there are some issues with giving users such open access to your database.

And for reference, the above interruption comes to you by courtesy of the Not Invented Here strip.

10

Hi Paul. Thank you for the reaction. I was sure the interruption wasn’t coming from you :slight_smile:

These users are admins working for the website so that is not a real issue.

What I am actually looking for is something similar to this. Where there are values in the dropdown list, but the user still can type in a new value. The ony difference would be, that in this example the values from the dropdown are included in within the function, where I would like to get them from the database like in a regular select box. I am not worried about how to get the added value into the database, but more how I get the already existing data from the database into this construction.

Thanks a lot

11

Here’s the combobox that you’re looking for. Enable the remote database option and you’re all good to go.

12

Why not just use an ordinary HTML 5 combobox as your starting point.

13

I would wager dollars to doughnuts that a bunch of IE browsers (specifically IE8, possibly later) probably won’t support HTML5 combobox.

I’d be surprised if they did.

14

Hi Paul. Thanks for the reply, That is indeed what I am looking for although I find the example given by Stephen also quite interesting! So I will have a look into that as well.

15

Hi Stephen. Thank you for the reply. I find this quite interesting the only downfall so far is that when I use integers for the value like:


    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Thre</option>

The drop down shows like this:


1    One
2   Two
3   Three

Is there something I can do to avoid that. I need the value to be an integer for the insert into the database.

Thank you in advance

16

If the field is supposed to be sending numbers then you’d code it as:

<input  name="num" type="text" list="numbers">
<datalist id="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</datalist>

Of course as a combobox there’d be nothing to stop someone typing ‘One’ in the field regardless of how you define the options.

17

Hi Stephen. Thanks again for the reply. I think I didn’t explain myself right.

I need the option value, 1 to be inserted into the database when choosen. But the select box need to show only the text value, One. Just like the old fashion select box:

<option value="1">One</option>

But when I approach it like the usual select box it shows:

1 One

while I just want to show:

One
18

You can code a datalist so that only the values are shown (the option acts as a self-closing tag), and use some scripting that watches for which option is chosen and updates a hidden form field with the index number of that option.

That seems to be about the only way to achieve what you’re after, with the datalist.

19

Hi paul do you know of any examples or tutorials of how I should code that?

20

I’ve put together a simple example for you, up at http://jsfiddle.net/pmw57/3Dje5/


function updateHiddenNumber(form, i) {
    form.elements.specialDatalistNumber = i;
    alert('Datalist (zero-based) index is ' + i);
}
function updateFormWithDatalistIndex() {
    var datalist = this.list,
        i;
    for (i = 0; i < datalist.options.length; i += 1) {
        if (datalist.options[i].value === this.value) {
            updateHiddenNumber(this.form, i);
        }
    }
}
var form = document.querySelector('#myForm');
myForm.elements.inputField.onchange = updateFormWithDatalistIndex