选择Dropbox值并显示在下一个文本字段中

Question

这是JavaScript   

        function validation(form)
        {

            if(form.memt.value == "select"){
                document.getElementById("f").value = document.getElementById("t").value;
                form.memt.style.backgroundColor = "aqua";
                form.name.style.backgroundColor = "";
                form.ic_1.style.backgroundColor = "";
                form.phone.style.backgroundColor = "";
                form.address.style.backgroundColor = "";
                form.memt.focus();
                alert("Please Select Your Member Type");
                pause;
            }
            if(form.name.value == ""){
                form.memt.style.backgroundColor = "";
                form.name.style.backgroundColor = "aqua";
                form.ic_1.style.backgroundColor = "";
                form.phone.style.backgroundColor = "";
                form.address.style.backgroundColor = "";
                form.name.focus();
                alert("You Need Specify Your Name");
                pause;
            }
            var alphabert = /^[a-zA-Z ]+$/;
            if(!form.name.value.match(alphabert))
                {
                    form.memt.style.backgroundColor = "";
                    form.name.style.backgroundColor = "red";
                    form.ic_1.style.backgroundColor = "";
                    form.phone.style.backgroundColor = "";
                    form.address.style.backgroundColor = "";
                    form.name.focus();
                    document.getElementById("n").select();
                    alert("Name Must Be In Alphabert Form.");
                    pause;    
                }
               if(form.name.value == "G"){
               form.fees.value =="100"; <--- Problems Here
           }
            else{
                form.submit();
            }   
        }     
    </script>

HTML

    <fieldset>
    <legend><strong><font color="White"> Create Member </font></strong></legend>
    <form action="AddMember"  >
    <table cellspacing="10">

    <tr>
        <!--  generating ID number  -->

        <td style="width: 200px" >&nbsp;&nbsp;<font color="White" ><label>Member ID</label></font>&nbsp;</td>
        <td colspan="4"></td>
    </tr>

   <!--Selecting MemberType-->
    <tr>
        <td style="width: 200px" >&nbsp;&nbsp;<font color="White" ><label>Member Type</label></font>&nbsp;</td>
        <td colspan="4"><select name="memt" id="t" style="width: 290px">
                <option value="select">Select Member Type</option>
                <option value="N">Normal Member</option>
                <option value="S">Silver Member</option>
                <option value="G">Gold   Member</option></select>
        </td>
    </tr>
    <!--MemberType Fees-->
    <tr>
        <td style="width: 200px" >&nbsp;&nbsp;<font color="White" ><label>Member Fees</label></font>&nbsp;</td>
        <td colspan="4"><input type="text" id="f" name="fees" style="width: 290px"  placeholder="Member Fee" readonly/></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td><input type="reset" value="Reset" style="width: 74px ; background-color:transparent ;color:white" /></td>
        <td><input type="button" value="Add" style="width: 74px ; background-color:transparent ;color:white" onclick="validation(this.form); "/></td>
    </tr>

      </table>
    </form>

我正在为Membertype做一个Dropbox选项，在Option中有3种类型的成员，当我选择memberType For gold Member时，我希望费用出现在下一个输入文本中。 那么我将如何解决这个问题呢？例如，我选择金牌会员，膜类费用将自动出现100。

Answer 1

你的select元素需要一个onchange属性，它将是你的javascript函数，为'f'输入元素指定适当的值

<select id="memt" onchange="onMemtChange" ... </select>

function onMemtChange() {
    document.getElementById('f').value=100
}

Answer 2

这可以使用change元素上的<select>事件来实现。

要显示费用，请勿使用已禁用的文本框。请改用<span>。它更具语义性。

编辑：用文本框替换了跨度。

EDIT1：主代码中的集成先前代码段。

工作代码段：

＆＃13;

＆＃13;

function validation(form)
{

  if(form.memt.value == "select"){
    document.getElementById("f").value = document.getElementById("t").value;
    form.memt.style.backgroundColor = "aqua";
    form.name.style.backgroundColor = "";
    form.ic_1.style.backgroundColor = "";
    form.phone.style.backgroundColor = "";
    form.address.style.backgroundColor = "";
    form.memt.focus();
    alert("Please Select Your Member Type");
    pause;
  }
  if(form.name.value == ""){
    form.memt.style.backgroundColor = "";
    form.name.style.backgroundColor = "aqua";
    form.ic_1.style.backgroundColor = "";
    form.phone.style.backgroundColor = "";
    form.address.style.backgroundColor = "";
    form.name.focus();
    alert("You Need Specify Your Name");
    pause;
  }
  var alphabert = /^[a-zA-Z ]+$/;
  if(!form.name.value.match(alphabert))
  {
    form.memt.style.backgroundColor = "";
    form.name.style.backgroundColor = "red";
    form.ic_1.style.backgroundColor = "";
    form.phone.style.backgroundColor = "";
    form.address.style.backgroundColor = "";
    form.name.focus();
    document.getElementById("n").select();
    alert("Name Must Be In Alphabert Form.");
    pause;    
  }
  else{
    form.submit();
  }   
}     

document.getElementById('t').addEventListener('change', function(){
  switch(this.value){
    case "N":
      document.getElementById('f').value = "10";
      break;
    case "S":
      document.getElementById('f').value = "20";
      break;
    case "G":
      document.getElementById('f').value = "30";
      break;
    default:
      document.getElementById('f').value = "";
      break;

  }
});

＆＃13;

<fieldset>
  <legend><strong> Create Member </strong></legend>
  <form action="AddMember"  >
    <table cellspacing="10">

      <tr>
        <!--  generating ID number  -->

        <td style="width: 200px" >&nbsp;&nbsp;<label>Member ID</label>&nbsp;</td>
        <td colspan="4"></td>
      </tr>

      <!--Selecting MemberType-->
      <tr>
        <td style="width: 200px" >&nbsp;&nbsp;<label>Member Type</label>&nbsp;</td>
        <td colspan="4"><select name="memt" id="t" style="width: 290px">
          <option value="select">Select Member Type</option>
          <option value="N">Normal Member</option>
          <option value="S">Silver Member</option>
          <option value="G">Gold   Member</option></select>
        </td>
      </tr>
      <!--MemberType Fees-->
      <tr>
        <td style="width: 200px" >&nbsp;&nbsp;<label>Member Fees</label>&nbsp;</td>
        <td colspan="4"><input type="text" id="f" name="fees" style="width: 290px"  placeholder="Member Fee" readonly/></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><input type="reset" value="Reset" style="width: 74px"  /></td>
        <td><input type="button" value="Add" style="width: 74px " onclick="validation(this.form); "/></td>
      </tr>

    </table>
  </form>

＆＃13;

＆＃13;

＆＃13;

change | MDN

switch | MDN

Answer 3

$('#t').change(function(){

    $('#f').val("100");

});