使用 javascript 在下拉列表更改时填充表单字段

Question

我正在尝试根据下拉框中选择的值填充字段中的数据。我已将下拉选项选择传递给 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

jQuery 使用 val() 来获取和设置值。

所以你的js函数应该是

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

而不是

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

Also

应该是

Answer 2

快速回答是，我认为您需要使用 val() 而不是 value - 不太记得它如何与 select 一起使用

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

Answer 3

此处出现 HTML ID 错误 应该是 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>