1

I will explain my problem.

I have a select with multiple options, and one (or more) input. I would like this (these) input are used to give me an additional value to my options.

So, i want with a single input to give an additional value for each option, and that this be kept in memory (without database ^^).

Do you understand ?? Any idea ? Ty !

Edit :

For example : 

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<input type="text" />

I chose option 1 and i set in my input "ok".

I chose option 3 and i set in my input "test".

if i re-chose option 1 i found my value "ok".

Edit 2 : inputs will be a kind of configuration for my options. Each option can have 1 or more input more. An input can have 80 different values​​, if I have 80 options.

Clément Andraud
  • 9,103
  • 25
  • 80
  • 158
  • Explain/describe what you want. Give an example. Show us the code you already have. – Thomas Jul 16 '12 at 14:03
  • Are you rendering this on a server beforehand or is this static HTML? – StuperUser Jul 16 '12 at 14:13
  • @ClémentAndraud If you have ~3500 inputs of static HTML you should find a way to generate that HTML, something as simple as string concatenation in an excel spreadsheet can save you a lot of time. – StuperUser Jul 16 '12 at 14:28
  • In fact, i dont know what is static html in french ;) – Clément Andraud Jul 16 '12 at 14:43
  • @ClémentAndraud Ah, j'suis désolé. I would call HTML that you would write once and save in a .html file static. Rather HTML that is dynamically generated by server-side framework/language e.g. ASP.NET, PHP and sent as a response. – StuperUser Jul 16 '12 at 17:02

3 Answers3

1

With this version you can change the value of the input and it will be saved.

You can make use of the data- attributes:

Example

<select id="select">
  <option value="test1">1</option>
  <option value="test2">2</option>
  <option value="test3">3</option>
</select>
<input id="textinput" type="text" />​​​​​​​​​​​​​​​​​​​

<script>
$('#select').change(function(){
    $('#textinput').val($(this).find('option:selected').val());
});
$('#textinput').keyup(function(){
    $('#select option:selected').val(this.value);
});
</script>
Thomas
  • 8,426
  • 1
  • 25
  • 49
0
<select>
  <option text="ok">1</option>
  <option text="hello">2</option>
  <option text="test">3</option>
</select>
<input type="text" />

$(function(){
  $('select').on('change', function(){
    $('input').val($('option:selected', this).attr('text'));
  });
});

Here's a working JSFiddle

Ohgodwhy
  • 49,779
  • 11
  • 80
  • 110
  • Is `text` valid? Do you mean `label`? – StuperUser Jul 16 '12 at 14:09
  • @StupidUser Check the fiddle. – Ohgodwhy Jul 16 '12 at 14:11
  • And if i have 40 inputs with 40 differents values for each option ? – Clément Andraud Jul 16 '12 at 14:11
  • 1
    @ClémentAndraud Describe the relationship between the inputs and the values. You want to update the value of an input that shares some relationship with the option item? – Ohgodwhy Jul 16 '12 at 14:12
  • The fiddle works. I didn't say it didn't work. There's a difference between functional and valid HTML. – StuperUser Jul 16 '12 at 14:12
  • @StuperUser Text attribute for options is undocumented and supported; you can check it in any browser, including IE 6. – Ohgodwhy Jul 16 '12 at 14:16
  • I know it's supported, but using a documented attribute for the same purpose is more readable/maintainable. If a script is written against this attribute and the page is updated to be rendered by a server-side language that only generates supported attributes scripts can break. – StuperUser Jul 16 '12 at 14:35
-1

I believe you want to use the value or label attribute of an option, see more details at the Mozilla Developer Network documentation for <select> and MDN docs for <option>.

See Getting an option text/value with JavaScript for an example of its use.

Community
  • 1
  • 1
StuperUser
  • 10,555
  • 13
  • 78
  • 137