从选择框传递文本数据

时间:2014-02-15 17:06:47

标签: javascript php html mysql

任何人都可以帮助我如何将所有选择(框)中的选定text传递给他们的特定(textboxes)。 因为所有selectbox的值都是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="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>

脚本将所选文本中的数据从每个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>

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

您应该确保您的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>