使用javascript在下拉列表中填充表格字段

我試圖根據在下拉框中選擇的值填充我的字段中的數據。我已經通過下拉選項選擇javascript函數，但在更新表單域時遇到問題。請檢查我的代碼是否存在我犯下的錯誤。使用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){ 

    } 

}

來源

2011-03-16 Angeline

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)">

來源

2011-03-16 09:45:26

也查看http://jsbin.com/quyo5/進行工作演示 – 2011-03-16 09:47:47

謝謝，但我無法檢查複選框，並設置其他下拉（'標題'）字段。你能幫我那個嗎？ – Angeline 2011-03-16 10:50:57

好吧，我沒有看到你的代碼中的任何複選框。你是否已經訪問了我在評論中發佈的鏈接？ – 2011-03-16 11:00:11

快速的回答是，我認爲你需要使用VAL（）不值 - 不太記得了它的工作原理與選雖然

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

來源

2011-03-16 09:39:30 andyface

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){ 

    } 
}

來源

2011-03-16 09:45:23 Emmanuel

謝謝，但選項值不是用此代碼設置的。 – Angeline 2011-03-16 10:51:58

@Angeline好的:)我不確定 – Emmanuel 2011-03-16 15:55:23

您可以使用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>

來源

2011-03-16 09:54:33 Mic

使用javascript在下拉列表中填充表格字段

回答

相關問題