循环中依赖的下拉列表无法正常工作

时间:2017-02-21 16:34:58

标签: javascript jquery html

    echo "<select name = error_type id='error_type$rowIndex' name='error_type$rowIndex' class='error_type'>
    <option value= >Select Type</option>
      <option value=Category1>Category1</option>
      <option value=Category2>Category2</option>
      </select>
    </td><td>
   <select disabled=disabled id='remarks$rowIndex' name='remarks$rowIndex' class='remarks'>
    <option value= >Select Subtype </option>
    <option rel='Category1' value='Subcategory1.1'>Subcategory1.1</option>
    <option rel='Category1' value='Subcategory1.2'>Subcategory1.2</option>
    <option rel='Category1' value='Subcategory1.3'>Subcategory1.3</option>
    <option rel='Category2' value='Subcategory2.1'>Subcategory2.1</option>
    <option rel='Category2' value='Subcategory2.2'>Subcategory2.2</option>
    <option rel='Category2' value='Subcategory2.3'>Subcategory2.3</option>                      
    </select>";

我有一个php表,输出'n'行,每行有2个下拉列表。上面的代码部分仅适用于Php表的第一行,但是当下一行更改时,第一行的子类别也会发生变化。如何使各行独立行动。

js是,

    $(function(){

    var $error_type = $(".error_type"),
        $remarks = $(".remarks");

    $error_type.on("change",function(){
        var _rel = $(this).val();
        $remarks.find("option").attr("style","");
        $remarks.val("");
        if(!_rel) return $remarks.prop("disabled",true);
        $remarks.find("[rel="+_rel+"]").show();
        $remarks.prop("disabled",false);
    });

});

cs是,

.remarks option{
    display:none;
}

.remarks option.label{
    display:block;
}

- 编辑 -

$(function(){

    var $error_type = $(".error_type"),
        $remarks = $(".remarks");

    $error_type.on("change",function(){
        var $remarks = $(this).closest("tr").find(".remarks");
        var _rel = $(this).val();
        $remarks.find("option").attr("style","");
        $remarks.val("");
        if(!_rel) return $remarks.prop("disabled",true);
        $remarks.find("[rel="+_rel+"]").show();
        $remarks.prop("disabled",false);
    });

});

1 个答案:

答案 0 :(得分:0)

这将解析为所有匹配元素:

    self.set_filter("unanswered")

    all_sections = AssessmentSection(self.driver).get_all_section_names()
    print(all_sections)

        i = 1
        self.driver.implicitly_wait(3)

        for element in self.driver.find_elements_by_xpath('(//div[@bo-if])'):
            self.driver.implicitly_wait(3)
            print("in for loop at " + all_sections[j])
            if element.get_attribute("bo.if") == "questionResponse.question.type === 'TextQuestion'":
                print("found text question")
                self.driver.find_element_by_xpath('.//pre[@class="textareaClone"]//div').send_keys(XpathData.test_string)
                self.driver.find_element_by_xpath('.//pre[@class="textareaClone"]//div').send_keys(Keys.TAB)
                i += 1
            elif element.get_attribute(
                    "bo.if") == "questionResponse.question.type === 'SingleSelectQuestion' || questionResponse.question.type === 'PolarQuestion'":
                print("found choice question")
                self.driver.find_element_by_xpath(
                    './/*[@id="ng-app"]/body/div[1]/div[3]/div/div/div[2]/div[3]/div[' + str(
                        i) + ']/div/div/div/div[2]/div[1]/label').click()
                i += 1


        Wait(self.driver, Wait.timeout).until(EC.visibility_of_element_located((By.XPATH, '//div[contains(text(), \'' + all_sections[j] + '\')]')))
        self.driver.find_element_by_xpath('//div[contains(text(), \'' + all_sections[j] + '\')]').click()
        j += 1
        print(j)

您在页面加载时执行该操作,然后始终在所有这些元素上进行操作。相反,完全删除该行,并使用事件源作为起点,找到事件发生时您要查找的特定元素。

也许是这样的:

$remarks = $(".remarks");

这个想法是当$error_type.on("change", function(){ var $remarks = $(this).closest("tr").find(".remarks"); // the rest of your handler code }); 事件发生时,你从change(这是触发事件的元素)开始,将DOM遍历到一个共同的父元素(给定你的HTML&# 39;可能是this),然后找到特定目标<tr>元素。