得到孩子的物品ID(香草JS)

时间:2018-03-25 22:45:05

标签: javascript html web puppeteer

我想检查form是否选项CAD (在第7级),如果有,则获取表单ID。

// first level   
<form id="15" method="post" action="/open a new page" target="_blank">

        //second level- 1                               
        <div>   
            <input type="hidden" id="CHECK" name="CHECK">
        </div>

        //secode leve - 2
        <table cellpadding="0" cellspacing="0" border="0" width="100%">

            // 3rd level
            <tbody>

                //4th level
                <tr>    

                  // 5th level                                                      
                  <td>
                    <input type="hidden" name="name" value="Frank">                                                             
                    <input type="hidden" name="identifier" value="12345">
                    <input type="hidden" name="code" value="299 ">
                    <input type="hidden" name="type" value="060201">
                    <input type="hidden" name="claim" value="4567">
                    <input type="hidden" name="departement" value="IT">
                    <input type="hidden" name="city" value="S25">
                    <input type="hidden" name="num" value="28936">
                    <input type="hidden" name="typeClient" value="2">
                    <input type="hidden" name="numTel" value="4444">
                    <input type="hidden" name="prod" value="MMM">
                    <input type="hidden" name="label" value="doc">

                    //6th level
                    <select name="docToSeize" style="width:150px" class="form1">

                           // 7th levle
                           <option value="11">RAP </option>
                           <option value="12">CAD </option>
                           <option value="18">GGO</option>
                           <option value="1A">HYU</option>
                     </select>

                   </td>

                   <td valign="top">
                       <input type="submit" class="boutonbleuok" style="cursor: hand" value="ok" onclick="label">
                   </td>
               </tr>
            </tbody>
        </table>
    </form>

2 个答案:

答案 0 :(得分:2)

您可以使用函数querySelectorAll来获取选项,使用函数closest来查找父表单。

Array.prototype.forEach.call(document.querySelectorAll('[name="docToSeize"] option'), function(opt) {
  if (opt.textContent.trim() === 'CAD') {
    console.log(opt.closest('form').getAttribute('id'));
    return;
  }
});
form {
  display: none
}
<form id="15" method="post" action="/open a new page" target="_blank">

  //second level- 1
  <div>
    <input type="hidden" id="CHECK" name="CHECK">
  </div>

  //secode leve - 2
  <table cellpadding="0" cellspacing="0" border="0" width="100%">

    // 3rd level
    <tbody>

      //4th level
      <tr>

        // 5th level
        <td>
          <input type="hidden" name="name" value="Frank">
          <input type="hidden" name="identifier" value="12345">
          <input type="hidden" name="code" value="299 ">
          <input type="hidden" name="type" value="060201">
          <input type="hidden" name="claim" value="4567">
          <input type="hidden" name="departement" value="IT">
          <input type="hidden" name="city" value="S25">
          <input type="hidden" name="num" value="28936">
          <input type="hidden" name="typeClient" value="2">
          <input type="hidden" name="numTel" value="4444">
          <input type="hidden" name="prod" value="MMM">
          <input type="hidden" name="label" value="doc"> //6th level
          <select name="docToSeize" style="width:150px" class="form1">

                           // 7th levle
                           <option value="11">RAP </option>
                           <option value="12">CAD </option>
                           <option value="18">GGO</option>
                           <option value="1A">HYU</option>
                     </select>

        </td>

        <td valign="top">
          <input type="submit" class="boutonbleuok" style="cursor: hand" value="ok" onclick="label">
        </td>
      </tr>
    </tbody>
  </table>
</form>

答案 1 :(得分:0)

选择表单,然后选择其中的选项并迭代它们。

&#13;
&#13;
{Workflow.State:ProductName}
&#13;
const form = document.querySelector('form');
const options = [...form.querySelector('select[name=docToSeize]').children];
if (options.some(option => option.textContent.trim() === 'CAD')) console.log(form.id);
&#13;
&#13;
&#13;