使用JavaScript在下拉菜單中填充表單字段

Question

我試圖根據下拉框中選擇的值填充字段中的數據。 我已經將下拉選項select傳遞給javascript函數，但是在更新表單字段時遇到問題。 請檢查我的代碼是否存在我所犯的錯誤。

這是我的html代碼：

 <div class="form-ui">
      <span class="form-elements reqField">
          <select class="dropdown" onchange="populateData(this.options[this.selectedIndex].value,1)">
              <option value="1">Please Select</option>
              <option value="2">Mrs.Jane Smith</option>
              <option value="3">Mr.Junior Smith</option>
          </select>
      </span>

      <span class="form-elements reqField">
           <select id="itle1" class="dropdown">
              <option value="1">Mr.</option>
              <option value="2">Ms.</option>
              <option value="3">Mrs.</option>
           </select>
     </span>

    <span class="form-elements">
          <input id="FirstName1" type="text" class="text" value="" />
    </span>

    <span class="form-elements reqField">
          <input id="LastName1" type="text" class="text" value="" />
    </span>
   </div>

和javascript代碼：

 function populateData(value,person){
    if(value==2){
        $('#Title'+person).value=3;
        $('#FirstName'+person).value="Jane";
        $('#LastName'+person).value="Smith";
    }
   if(value==3){

   }

 }

Answer 1

快速的答案是，我認為您需要使用val（）而不是value-不太記得它與select一起工作的方式

http://api.jquery.com/val/

Answer 2

jQuery使用val()獲取和設置值。

所以你的js函數應該是

$('#FirstName'+person).val("Jane");
$('#LastName'+person).val("Smith");

並不是

$('#FirstName'+person).value="Jane";
$('#LastName'+person).value="Smith";

也

<select class="dropdown" onchange="populateData(this.options[this.selectedIndex].value,1)">

應該

<select class="dropdown" onchange="populateData(this.value,1)">

Answer 3

這里HTML ID錯誤<select id="itle1" class="dropdown">應Title1不itle1

我也認為javascript應該看起來像這樣

function populateData(value,person){
    if(value==2){
        $('#Title'+person+' option[value="3"]').attr('selected','selected');
        $('#FirstName'+person).val("Jane");
        $('#LastName'+person).val("Smith");
    }
    if(value==3){

    }
}

Answer 4

您可以使用FORM代替DIV，並使用屬性name代替id 。
他們是很久以前設計用來管理表格的。

您可以使用jQuery，但是所有內容都已經內置在純Javascript中以處理表單。

<form class="form-ui">
  <span class="form-elements reqField">
      <select class="dropdown" onchange="populateData(this)">
          <option value="1">Please Select</option>
          <option value="2">Mrs.Jane Smith</option>
          <option value="3">Mr.Junior Smith</option>
      </select>
  </span>

  <span class="form-elements reqField">
       <select name="title" class="dropdown">
          <option value="1">Mr.</option>
          <option value="2">Ms.</option>
          <option value="3">Mrs.</option>
       </select>
 </span>

<span class="form-elements">
      <input name="FirstName" type="text" class="text" value="" />
</span>

<span class="form-elements reqField">
      <input name="LastName" type="text" class="text" value="" />
</span>
</form>
<script>
    function populateData(sel){
        var form = sel.form,
            value = sel.options[sel.selectedIndex].value;
        switch(value){
            case '3':
                form.FirstName.value = 'Junior';
                form.LastName.value = 'Smith';
                form.title.value = '1';
            break;
            case '2':
            break;
            default:
        }
    }
</script>