Question

所以我已经从事此工作约一天了……我有一个表单，其中有一个选择菜单，其选择会触发另一个从属选择菜单。

这时我要做的是根据第二个选择菜单中的选择填写默认值。基本上，如果用户在“人工”菜单中选择“操作员”选项，则费率值应预先填充该职位的每日费率-假设为100美元。

到目前为止，我已经成功地为函数的第一部分添加了事件侦听器，并且表单在该选择上进行了很好的调整，但是我无法弄清楚如何填写费率。寻找类似的情况很幸运，我尝试了很多我认为可行的方法，例如，但是到目前为止，我想出了一些问题，但有错误。

这是我目前拥有的，显然不起作用：

    <script>
    document.getElementById('MAIN').addEventListener('change', function () {
        var style = this.value == 0 ? 'inline' : 'none';
    		document.getElementById('Labor').style.display = style;
    		blurlaborblur();
    		//document.getElementById('sup').style.display = style;
    	
    		
    	var style = this.value == 1 ? 'inline' : 'none';
        document.getElementById('mateq').style.display = style;
    	
    	var style = this.value == 2 ? 'inline' : 'none';
        document.getElementById('equip').style.display = style;
    	
    	var style = this.value == 3 ? 'inline' : 'none';
        document.getElementById('subq').style.display = style;
    });


    function blurlaborblur(){
    document.getElementById('laborchoices').addEventListener('onblur', function(){
    	var rate = this.value == laborchoices0 ? 'inline' : 'none'; 
    		document.getElementById('value') = '165';

     var rate = this.value == laborchoices1 ? 'inline' : 'none'; 
    		document.getElementById('value') = '95';

    var rate = this.value == laborchoices2 ? 'inline' : 'none'; 
    		document.getElementById('value') = '85';
      }
    </script>

<body>
<div id="T&M" style="display: block;">
	
	<select id="MAIN" name="category">
	   <option value="0">Labor</option>
	   <option value ="1">Materials & Equipment</option>
	   <option value ="2">Equipment</option>
	   <option value ="3">Subcontractor</option>
	</select>

		<div id="Labor" style="display: inline;">
			<select id="laborchoices" name="labor">
				<option value="laborchoices0">Supervisor</option>
				<option value ="laborchoices1">Operator</option>
				<option value ="laborchoices2">Rigger</option>
			</select>
    		
			<div id="sup" style="display: inline;">
				<br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
				MH/Unit: <input type='number' step='0.25' value='2'></input>
				Total MH: <input type='number' step='0.05' value='1'></input><br /><br />
				Rate: $<input id='rate' type='number' step='0.25' placeholder=$rate ></input>				
				Total: $<br /><br />
				Comments: <textarea cols='30' rows='3'></textarea></input>
			</div>
		
			<div id="opr" style="display: none;">
				<br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
				MH/Unit: <input type='number' step='0.25' value='2'></input>
				Total MH: <input type='number' step='0.05' value='1'></input><br /><br />
				Rate: $<input id='rate' type='number' step='0.25' placeholder=$rate ></input>
				Total: $<br /><br />
				Comments: <textarea cols='30' rows='3'></textarea></input>

			</div>
		
			<div id="rig" style="display: none;">
				<br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
				MH/Unit: <input type='number' step='0.25' value='2'></input>
				Total MH: <input type='number' step='0.05' value='1'></input><br /><br />
				Rate: $<input id='rate' type='number' step='0.25' placeholder=$rate ></input>
				Total: $<br /><br />
				Comments: <textarea cols='40' rows='3'></textarea></input>

			</div>
		</div>
				
		<div id="mateq" style="display: none;">
			<select id="choices" name="form_select">
			   <option value="mateqchoices0">Stands</option>
			   <option value ="mateqchoices1">Beams</option>
			   <option value ="mateqchoices2">Mats</option>
			   <option value ="mateqchoices3">Other</option>
			</select>
		
			<div id="stands" style="display: inline;">
				<br /><br />DAYS: <input type='number' step='1' value='0'></input>
				Qty: <input type='number' step='1' value='0'></input><br /><br />
				$/Unit: <input type='number' step='0.05' value='10.00'></input>
				Total: $ <br /><br />
				Description: <textarea cols='40' rows='3'></textarea></input>
			</div>
			
			<div id="beams" style="display: none;">
				<br /><br />DAYS: <input type='number' step='1' value='0'></input>
				Qty: <input type='number' step='1' value='0'></input><br /><br />
				$/Unit: <input type='number' step='0.05' value='10.00'></input>
				Total: $ <br /><br />
				Description: <textarea cols='40' rows='3'></textarea></input>
			</div>
			
			<div id="Mats" style="display: none;">
				<br /><br />DAYS: <input type='number' step='1' value='0'></input>
				Qty: <input type='number' step='1' value='0'></input><br /><br />
				$/Unit: <input type='number' step='0.05' value='10.00'></input>
				Total: $ <br /><br />
				Description: <textarea cols='40' rows='3'></textarea></input>
			</div>			

			<div id="othermateq" style="display: none;">
				<br /><br />DAYS: <input type='number' step='1' value='0'></input>
				Qty: <input type='number' step='1' value='0'></input><br /><br />
				$/Unit: <input type='number' step='0.05' value='10.00'></input>
				Total: $ <br /><br />
				Description: <textarea cols='40' rows='3'></textarea></input>
			</div>	
		</div>

		<div id="equip" style="display: none;">
			<select id="choices" name="form_select">
			   <option value="equipchoices0">Trailer</option>
			   <option value ="equipchoices1">Other</option>
			</select>
		
			<div id="trailer" style="display: inline;">
				<br /><br />DAYS: <input type='number' step='1' value='0'></input>
				Qty: <input type='number' step='1' value='0'></input><br /><br />
				$/Unit: <input type='number' step='0.05' value='10.00'></input>
				Total: $ <br /><br />
				Description: <textarea cols='40' rows='3'></textarea></input>
			</div>			

			<div id="otherequip" style="display: none;">
				<br /><br />DAYS: <input type='number' step='1' value='0'></input>
				Qty: <input type='number' step='1' value='0'></input><br /><br />
				$/Unit: <input type='number' step='0.05' value='10.00'></input>
				Total: $ <br /><br />
				Description: <textarea cols='40' rows='3'></textarea></input>
			</div>	
		</div>
		
		<div id="subq" style="display: none;">
			<select id="choices" name="form_select">
			   <option value="subq0">Per diem</option>
			   <option value ="subq1">Other</option>
			</select>
		
			<div id="perdiem" style="display: inline;">
				<br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
				Rate: <input type='number' step='0.05' value='160.00'></input>
				Total: $ <br /><br />
				Description: <textarea cols='40' rows='3'></textarea></input>
			</div>			

			<div id="othersubq" style="display: none;">
				<br /><br />Qty: <input type='number' step='0.25' value='1'></input> EA <br /><br />
				Rate: <input type='number' step='0.05' value='160.00'></input>
				Total: $ <br /><br />
				Description: <textarea cols='40' rows='3'></textarea></input>
			</div>	
		</div>
</div>
</body>


<!-- begin snippet: js hide: false console: true babel: false -->

Answer 1

因此，我建议使用数组结构SelStruct

id =“ T＆M”无效=>更改为id =“ T-M” 在其他地方某些ID不是唯一的，所以我更改了它们

const
  MainSelect = document.getElementById('MAIN'),
  SelStruct = [
    { ref : "Labor", subs : [ 'sup', 'opr', 'rig' ] },
    { ref : "mateq", subs : [ 'stands', 'beams', 'Mats', 'othermateq' ] },
    { ref : "equip", subs : [ 'trailer', 'otherequip' ] },
    { ref : "subq",  subs : [ 'perdiem', 'othersubq' ] }
    ]
  ;

function SetSelectMain()
{
  let ref_Select = MainSelect.selectedIndex;
  for (let i=0; i<SelStruct.length; i++ )
  {
    document.getElementById(SelStruct[i].ref).style.display = (ref_Select===i) ? 'inline' : 'none';
  }
}


SetSelectMain();  // first attempt

MainSelect.onchange = SetSelectMain;

// init all Sub Select event Listerner

for (let i=0; i<SelStruct.length; i++ )
{
  let  id_subSelect = 'choices-' + SelStruct[i].ref;

  for( let sx=0;sx<SelStruct[i].subs.length; sx++)
  {
    document.getElementById(SelStruct[i].subs[sx]).style.display = (sx===0) ? 'inline' : 'none';
  }

  document.getElementById(id_subSelect).addEventListener('change', function()
  {
    let
      ref_subSelect = this.id.substr(8),  // ignore string 'choice-'
      s_elem = SelStruct.find( function(elem){ return (elem.ref===ref_subSelect)})
    ;
    for( sb = 0; sb < s_elem.subs.length; sb++)
    {
      document.getElementById(s_elem.subs[sb]).style.display = (this.selectedIndex===sb) ? 'inline' : 'none';
    }
  })

}




/*
I don't know what to do with this ..

document.getElementById('value') = '165';

document.getElementById('value') = '95';

document.getElementById('value') = '85';

*/

#T-M { display: block; }
    #T-M > div,
    #T-M > div > div { display: none; }

<div id="T-M" >

  <select id="MAIN" name="category">
    <option>Labor</option>
    <option>Materials & Equipment</option>
    <option>Equipment</option>
    <option>Subcontractor</option>
  </select>

  <div id="Labor" >
    <select id="choices-Labor">
      <option>Supervisor</option>
      <option>Operator</option>
      <option>Rigger</option>
    </select>

    <div id="sup">
      <br /><br />
      Qty:      <input type='number' step='0.25' value='1'> EA <br /><br />
      MH/Unit:  <input type='number' step='0.25' value='2'>
      Total MH: <input type='number' step='0.05' value='1'><br /><br />
      Rate: $   <input type='number' step='0.25' >
      Total: $  <br /><br />
      Comments: <textarea cols='30' rows='3'></textarea>
    </div>

    <div id="opr">
      <br /><br />
      Qty:      <input type='number' step='0.25' value='1'> EA <br /><br />
      MH/Unit:  <input type='number' step='0.25' value='2'>
      Total MH: <input type='number' step='0.05' value='1'><br /><br />
      Rate: $   <input type='number' step='0.25' >
      Total: $  <br /><br />
      Comments: <textarea cols='30' rows='3'></textarea>

    </div>

    <div id="rig">
      <br /><br />
      Qty:      <input type='number' step='0.25' value='1'> EA <br /><br />
      MH/Unit:  <input type='number' step='0.25' value='2'>
      Total MH: <input type='number' step='0.05' value='1'><br /><br />
      Rate: $   <input type='number' step='0.25' >
      Total: $   <br /><br />
      Comments: <textarea cols='40' rows='3'></textarea>

    </div>
  </div>

  <div id="mateq" >
    <select id="choices-mateq">
      <option>Stands</option>
      <option>Beams</option>
      <option>Mats</option>
      <option>Other</option>
    </select>

    <div id="stands">
      <br /><br />
      DAYS:    <input type='number' step='1' value='0'>
      Qty:     <input type='number' step='1' value='0'><br /><br />
      $/Unit:  <input type='number' step='0.05' value='10.00'>
      Total: $ <br /><br />
      Description: <textarea cols='40' rows='3'></textarea>
    </div>

    <div id="beams">
      <br /><br />
      DAYS:    <input type='number' step='1' value='0'>
      Qty:     <input type='number' step='1' value='0'><br /><br />
      $/Unit:  <input type='number' step='0.05' value='10.00'>
      Total: $ <br /><br />
      Description: <textarea cols='40' rows='3'></textarea>
    </div>

    <div id="Mats">
      <br /><br />
      DAYS:   <input type='number' step='1' value='0'>
      Qty:    <input type='number' step='1' value='0'><br /><br />
      $/Unit: <input type='number' step='0.05' value='10.00'>
      Total: $ <br /><br />
      Description: <textarea cols='40' rows='3'></textarea>
    </div>

    <div id="othermateq">
      <br /><br />
      DAYS:    <input type='number' step='1' value='0'>
      Qty:     <input type='number' step='1' value='0'><br /><br />
      $/Unit:  <input type='number' step='0.05' value='10.00'>
      Total: $ <br /><br />
      Description: <textarea cols='40' rows='3'></textarea>
    </div>
  </div>

  <div id="equip" >
    <select id="choices-equip" >
      <option>Trailer</option>
      <option>Other</option>
    </select>

    <div id="trailer">
      <br /><br />
      DAYS:    <input type='number' step='1' value='0'>
      Qty:     <input type='number' step='1' value='0'><br /><br />
      $/Unit:  <input type='number' step='0.05' value='10.00'>
      Total: $ <br /><br />
      Description: <textarea cols='40' rows='3'></textarea>
    </div>

    <div id="otherequip">
      <br /><br />
      DAYS:    <input type='number' step='1' value='0'>
      Qty:     <input type='number' step='1' value='0'><br /><br />
      $/Unit:  <input type='number' step='0.05' value='10.00'>
      Total: $ <br /><br />
      Description: <textarea cols='40' rows='3'></textarea>
    </div>
  </div>

  <div id="subq" >
    <select id="choices-subq">
      <option>Per diem</option>
      <option>Other</option>
    </select>

    <div id="perdiem">
      <br /><br />
      Qty:    <input type='number' step='0.25' value='1'> EA <br /><br />
      Rate:   <input type='number' step='0.05' value='160.00'>
      Total: $ <br /><br />
      Description: <textarea cols='40' rows='3'></textarea>
    </div>

    <div id="othersubq">
      <br /><br />
      Qty:    <input type='number' step='0.25' value='1'> EA <br /><br />
      Rate:   <input type='number' step='0.05' value='160.00'>
      Total: $ <br /><br />
      Description: <textarea cols='40' rows='3'></textarea>
    </div>
  </div>
</div>

Answer 2

尝试一下

<?php 
$db = new PDO('mysql:dbname=mypro_bms;host=localhost', 'root', '');
if (isset($_GET['q'])) {
  $q = $_GET['q'];
  $statement = $db->prepare("select * from donate where passport_IC like :passport_IC");
  $statement->execute([
    ':passport_IC' => '%' . $q .'%'    
  ]);
} else {
  $statement = $db->prepare('select * from donate');
  $statement->execute();
}
$people = $statement->fetchAll(PDO::FETCH_OBJ);
// Here you have to pass the data($people) to search.php file
 ?>

if (document.getElementById('MAIN').value == 0)
        document.getElementById('rate1').value = '165'; // set the value if no option is selected, this is the default value. 

    document.getElementById('MAIN').addEventListener('change', function () {
        var style = this.value == 0 ? 'inline' : 'none';
        document.getElementById('Labor').style.display = style;


        var style = this.value == 1 ? 'inline' : 'none';
        document.getElementById('mateq').style.display = style;

        var style = this.value == 2 ? 'inline' : 'none';
        document.getElementById('equip').style.display = style;

        var style = this.value == 3 ? 'inline' : 'none';
        document.getElementById('subq').style.display = style;
    });


    // second dropdown change event rather than onblur, and dont wrap events in a function

    document.getElementById('laborchoices').addEventListener('change', function () {

        // use switch statement if you have to choose one out of multiple options;
        switch (this.value) {
            case 'laborchoices0':
                document.getElementById('rate1').value = '165';
                document.getElementById('sup').style.display = 'block';
                document.getElementById('opr').style.display = 'none';
                document.getElementById('rig').style.display = 'none';
                break;
            case 'laborchoices1':
                document.getElementById('rate2').value = '95';
                document.getElementById('sup').style.display = 'none';
                document.getElementById('opr').style.display = 'block';
                document.getElementById('rig').style.display = 'none';
                break;
            case 'laborchoices2':
                document.getElementById('rate3').value = '85';
                document.getElementById('sup').style.display = 'none';
                document.getElementById('opr').style.display = 'none';
                document.getElementById('rig').style.display = 'block';
        }
    });

我已注释掉js中的一些更改。

注意：-：您几乎没有具有相同ID名称（即“ rate”和“ choices”）的输入元素，我更改了这些html输入的ID，因为它违反了html标准。也更改了一些js。

HTML / Javascript addEventListener Onchange事件是否在Onchange中？

2 个答案: