javascript - Jquery: get name of option field - Stack Overflow

admin管理员组

文章数量:1352008

I am trying to copy a name of the selected html form option field to another field using jquery.
This is what i got now:

script

$(document).ready(
function()
{
    //check for change on the categories menu
    $('#categories').change(function() { 

    //get category value
    name = $('#categories').text();
    $('#name').val(name)

});

});

HTML

<form action="editcat.pnp" method="post" accept-charset="utf-8">
<table>
<tr>
<td><label for="category">Category:</label></td><td><select name="category_id"     id="categories">
<option value="1">Info</option>
<option value="2">Resr</option>
<option value="3">Pro</option>
<option value="4">Geo</option>
<option value="5">Site's</option>
<option value="6">Well</option>
<option value="7">Link</option>
<option value="#" selected="selected">Please select</option>
</select></td>
</tr>
<tr>
<tr>
<td><label for="name">Name:</label></td><td><input name="name" type="text" size="40" maxlength="40" id="name"></td>
</tr>
<tr>
<td></td><td><input type="submit" value="Update"> <input type="reset"></td>
</tr>
</table>
</form>

The problem is that the name field now contains all the names from the option dropdown list and not only the one i selected.

I am trying to copy a name of the selected html form option field to another field using jquery.
This is what i got now:

script

$(document).ready(
function()
{
    //check for change on the categories menu
    $('#categories').change(function() { 

    //get category value
    name = $('#categories').text();
    $('#name').val(name)

});

});

HTML

<form action="editcat.pnp" method="post" accept-charset="utf-8">
<table>
<tr>
<td><label for="category">Category:</label></td><td><select name="category_id"     id="categories">
<option value="1">Info</option>
<option value="2">Resr</option>
<option value="3">Pro</option>
<option value="4">Geo</option>
<option value="5">Site's</option>
<option value="6">Well</option>
<option value="7">Link</option>
<option value="#" selected="selected">Please select</option>
</select></td>
</tr>
<tr>
<tr>
<td><label for="name">Name:</label></td><td><input name="name" type="text" size="40" maxlength="40" id="name"></td>
</tr>
<tr>
<td></td><td><input type="submit" value="Update"> <input type="reset"></td>
</tr>
</table>
</form>

The problem is that the name field now contains all the names from the option dropdown list and not only the one i selected.

• javascript
• jquery
• html

Share Improve this question Follow edited May 16, 2012 at 12:53 HyperDevil asked May 16, 2012 at 12:47 HyperDevilHyperDevil 2,64999 gold badges4242 silver badges5252 bronze badges 1

• have some html to back that up? – shanabus Commented May 16, 2012 at 12:49

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

You should use :selected Selector to get selected option, and then .text() to get its name.

var name = $('#categories option:selected').text();

try this....

$(document).ready(
function()
{
    //check for change on the categories menu
    $('#categories').change(function() { 

    //get category value
    name = $("#categories option:selected").text();
    $('#name').val(name)

    });
});

Hope its help

I think you are looking to use $("#categories").val() instead of .text().

Example: http://jsfiddle/shanabus/wZAM7/

Read jQuery Docs and shown Examples in the .change() function.

本文标签： javascriptJquery get name of option fieldStack Overflow