从选择框中传递文本数据

Question

谁能帮助我将所选text从我所有的select（box）传递到特定textboxes （ textboxes ）。 因为所有选择框的值都是id整数，所以我打算将我选择的每个选择框的文本保存到数据库中。

我的将所选文本从selectbox传递到textbox的脚本不起作用，有人可以帮助我使其正常工作吗？

HTML：

<form method="post">
Caraga Region: <select name="region" id="region"></select>
Municipalities: <select name="town" id="town"></select>
Unique ID: <select name="uniq_id" id="uniq_id"></select>
Position: <select name="position" id="position"></select> <br />
Salary Grade: <select name="salary_grade" id="salary_grade"></select>
Salary: <select name="salary" id="salary"></select> <br />
<br />
<br />
Transfer Selected Text to textbox:<br />
<input id="region" name="reg" type="text"><br />
<input id="town" name="t" type="text" ><br />
<input id="uniq_id" name="u" type="text" ><br />
<input id="position" name="p" type="text" ><br />
<input id="salary_grade" name="sg" type="text" ><br />
<input id="salary" name="s" type="text" ><br />
</form>

脚本代码以将数据填充到选择框中：

<script type="text/javascript">
$( document ).ready(function() { 
   $("#region").jCombo({ url: "getRegion.php" } );
   $("#town").jCombo({ url: "getTown.php?townid=", parent: "#region", selected_value : '510' } );
   $("#uniq_id").jCombo({ url: "getID.php?unqid=", parent: "#town", selected_value : '150' } );
   $("#position").jCombo({ url: "getPosition.php?posid=", parent: "#uniq_id", selected_value : '150' } );
   $("#salary_grade").jCombo({ url: "getSalary_Grade.php?sgid=", parent: "#position", selected_value : '150' } );
   $("#salary").jCombo({ url: "getSalary.php?salaryid=", parent: "#salary_grade", selected_value : '150' } );
});
</script>

脚本将数据从每个选择textbox选定文本selectbox到特定的textbox ：

<script type="text/javascript">
$( document ).ready(function() { 
$("#region").document.getElementByID("region").options[document.getElementByID("region").selectedIndex].text
$("#town").document.getElementByID("town").options[document.getElementByID("town").selectedIndex].text
$("#uniq_id").document.getElementByID("uniq_id").options[document.getElementByID("uniq_id").selectedIndex].text
$("#position").document.getElementByID("position").options[document.getElementByID("position").selectedIndex].text
$("#salary_grade").document.getElementByID("salary_grade").options[document.getElementByID("salary_grade").selectedIndex].text
$("#salary").document.getElementByID("salary").options[document.getElementByID("salary").selectedIndex].text
});
</script>

Answer 1

我认为您误解了JQuery选择器的工作方式。 另外，您的HTML中有重复的ID。 这不是有效的HTML，将对您造成问题。

以下将为您工作：

<form method="post">
Caraga Region: <select name="region" id="region"></select>
Municipalities: <select name="town" id="town"></select>
Unique ID: <select name="uniq_id" id="uniq_id"></select>
Position: <select name="position" id="position"></select> <br />
Salary Grade: <select name="salary_grade" id="salary_grade"></select>
Salary: <select name="salary" id="salary"></select> <br />
<br />
<br />
Transfer Selected Text to textbox:<br />
<input id="region2" name="reg" type="text"><br />
<input id="town2" name="t" type="text" ><br />
<input id="uniq_id2" name="u" type="text" ><br />
<input id="position2" name="p" type="text" ><br />
<input id="salary_grade2" name="sg" type="text" ><br />
<input id="salary2" name="s" type="text" ><br />
</form>


<script type="text/javascript">
$( document ).ready(function() { 
$("#region2").attr('value', $('#region').text());
//etc...
});
</script>

Answer 2

您应该确保自己的ID是唯一的。 我为它们添加了前缀，因此它们是有效的。

<form method="post">
Caraga Region: <select name="region" id="s_region"></select>
Municipalities: <select name="town" id="s_town"></select>
Unique ID: <select name="uniq_id" id="s_uniq_id"></select>
Position: <select name="position" id="s_position"></select> <br />
Salary Grade: <select name="salary_grade" id="s_salary_grade"></select>
Salary: <select name="salary" id="s_salary"></select> <br />
<br />
<br />
Transfer Selected Text to textbox:<br />
<input id="t_region" name="reg" type="text"><br />
<input id="t_town" name="t" type="text" ><br />
<input id="t_uniq_id" name="u" type="text" ><br />
<input id="t_position" name="p" type="text" ><br />
<input id="t_salary_grade" name="sg" type="text" ><br />
<input id="t_salary" name="s" type="text" ><br />
</form>

<script type="text/javascript">
$( document ).ready(function() { 
    $("#t_region").val($( "#s_region option:selected" ).text());
    $("#t_town").val($( "#s_town option:selected" ).text());
    $("#t_uniq_id").val($( "#s_uniq_id option:selected" ).text());
    $("#t_position").val($( "#s_position option:selected" ).text());
    $("#t_salary_grade").val($( "#s_salary_grade option:selected" ).text());
    $("#t_salary").val($( "#s_salary option:selected" ).text());
});
</script>