Question

我有一个下拉框，其中包含一些选项，这些选项选择后显示隐藏文本，方法是调用函数toggletDisplay()并通过发送选项的值，我希望它能够执行相同的操作但没有下拉框可供选择，而是使用带有onclick()的纯文本而不是onchange()或类似的字词。

当前代码

<form id="criteria" name="criteria">

<table width="200px" height="700px" name="criteria_search" align="left" border="1" style="margin-right:70px">
                <tr>
                    <td class="dataLabel" width="100%" align="left"><strong>Add Rule : </strong>
                        <select name="rule" id="rule" onChange="toggletdDisplay(this.form);"> 
                            <optgroup label="Simple Rules">
                                <option value="instructions" selected="selected">&nbsp;</option>
                                <option value="email">Email</option>
                                <option value="assigned">Assigned Racecourse</option>

                            </optgroup>
                        </select>
                    </td>
                </tr>
            </table>

            <table align="right"  border="1" width="300px" height="400px" style="float:left;">      
            <tr>


                <td class="dataLabel" name="assigned" id="assigned" style="display: none;">
                    <table border="0">
                    <tr>
                            <td colspan="3"><h4>Assigned to Racecourse</h4></td>
                        </tr>
                        <tr>
                            <td style="margin-left:20px">
                                <b>Assigned To: </b><select name="selected_assigned_location" id="selected_assigned_location"></select>
                            </td>
                        </tr>

                    </table>
                </td>


                <td  width="100px" class="dataLabel" name="email" id="email" style="display: none;" > 
                    <table>
                    <tr>
                            <td colspan="3"><h4>Registered Email</h4></td>
                        </tr>
                        <tr>
                            <td><b>Do they have a registered Email Account?</b></td>
                        </tr>
                        <tr>
                            <td>
                                Yes <input type="radio" name="email_c" value="true_ex" {EMAIL_TEX_CHECKED} checked="checked"> &nbsp; No <input type="radio" name="email_c" value="false" {EMAIL_F_CHECKED}>
                            </td>
                        </tr>
                    </table>
                </td>
...ect

我尝试只是通过onclick发送值

            <td>
                <p id="rule" name="rule" value="email" onclick="toggletdDisplay(this.form);">Email</p>
            </td>

但是我得到一个错误值规则未定义。我该如何像以前一样通过不发送select语句的方式发送值？

添加了toggletDisplay，仅使用发回的值将datalabel的样式从隐藏更改为内联

function toggletdDisplay(me) 
{     
    list = Array("instructions","sex", "email", "mobile", "account", "age", "location", "spent", "booked_anything", "internet_booked", "package_type", "package_name", "booked_location", "new_booked_event", "booked_event_range","team", "no_reorder", "newsletter","hear_about","hear_about_bookings","mosaic_group","mosaic_type","assigned","assigned_user","lead_source","target_list","awc","birthday"); 

    // hide any previously selected elements
    for(x=0; x<list.length; x++) 
    {
        deselect = getElementsByName_iefix("TD", list[x]);
        for (j=0; j<deselect.length; j++) 
        {
            deselect[j].style.display = "none";
        }
    }
    // display currently selected criteria
    selected = getElementsByName_iefix("TD", me.rule.value);
    selected[0].style.display = "inline";
}

Answer 1

您的代码似乎存在许多问题。其中之一是未定义的函数toggletdDisplay()，只要您在选择字段中更改选择，就会调用该函数。

但是，基本上，如果要将表单中的输入字段或选择框的值发送到服务器上的php脚本，则需要在{{1}中定义一个action属性}标签，并确保已提交表单。在您的情况下，可以通过在选择框中更改<form>属性来实现（简化代码，没有表体系结构）：

无论何时在选择框中更改选择，都会提交表单并将该选择框的值发送到onchange。浏览器中的地址行将显示类似

target.php

我也不清楚为什么在某些...<your URL>/target.php?rule=email元素中使用colspan属性，因为该表中仅显示一列。

我的建议是使用“剪切和粘贴”是经济的，并且仅使用您完全理解的代码。逐步逐步构建您的页面。这样一来，您将能够了解发生问题时需要解决的问题。

修改

使用您的<td>脚本，我们有一些工作要做。我想到的第一件事是，您没有在可能有用的jquery函数中使用它们。其次，您无需执行任何操作即可在控制台窗口中显示表单值或将其发送到php脚本。

还要注意，toggletdDisplay()属性只能分配给name或<input>元素，而不能分配给<select>元素。在下面的脚本中，我改用<td>属性。

id

var tds,tdis;
$(function(){
 var list = ["instructions","sex", "email", "mobile", "account", "age", "location", "spent", "booked_anything", "internet_booked", "package_type", "package_name", "booked_location", "new_booked_event", "booked_event_range","team", "no_reorder", "newsletter","hear_about","hear_about_bookings","mosaic_group","mosaic_type","assigned","assigned_user","lead_source","target_list","awc","birthday"]; 
 // consider only TDs with IDs from list array:
 tds= $('td').filter(function(i,el){return $.inArray(el.id,list)>-1;});
 // trigger the display of results only for select and input elements within tds:
 tdis=$('select,input', tds).on('change',listResults);
 // assign the toggletdDispla function to the rule selector:
 $('.action').on('change',toggletdDisplay);
});

function toggletdDisplay(){ tds.hide().filter('#'+this.value).show()}
function listResults(){
  $('#show').html('<p>Values to be sent:</p>'+tdis.serialize().replace(/&/g,'<br/>'))
}

使用文本而不是Select语句

1 个答案: