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

快速回答是我认为你需要使用val（）而不是值 - 不能完全记住它是如何工作的虽然

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>

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

4 个答案: