jquery显示/隐藏基于可变数值的表单字段

时间:2013-08-01 13:32:46

标签: jquery select hide option

我是jquery的新手,并尝试根据数字值(来自数据库查询)比较在选择输入中显示/隐藏选项字段。当数据库查询中的数字达到50时,我需要隐藏选择选项。谷歌搜索并搜索显示/隐藏的许多变化,但我无法提出一个有效的解决方案。这是我最新的approuch,它也是行不通的。任何建议或可能的探索方向都将非常受欢迎。

jQuery:

    $(document).ready(function () {
    var myCount = '50';   //will be pulled from a DB query

    $("#date-time2-1").attr("temp", 'myCount');

    if ($("#date-time2-1").val($(this).attr("temp")) > '49') {
    $("#date-time2-1").hide();
    } else {
    $("#date-time2-1").show();

    }

    );

Form html:

<h2>Example Registration Form</h2>

    <form id="form1" name="form1" method="post" action="">
      <table width="600" border="0">
        <tr>
          <td><label for="exfname">First Name</label>
          <input class="validate[required]" type="text" name="exfname" id="exfname" />
          <label for="exlname">Last Name</label>
          <input class="validate[required]" type="text" name="exlname" id="exlname" /></td>
        </tr>

        <tr>
          <td>
          <label for="datetime">Date-Session</label>
          <select class="validate[required]" name="datetime" size="1" id="datetime">
          <option value="" selected="selected">Please Select Date/Time</option>
          <option  id="date-time2-1"  value="" >Sept 3,2013 - 8:00AM</option>
          <option id="date-time1-2"  value="">Oct. 5, 2013 - 9:00AM</option>
          <option id="date-time1-1"  value="">Nov. 23, 2013 - 10:00AM</option>
          </select>
          </td>
        </tr>

        <tr>
          <td><p>
            <input  type="submit" name="submit" id="submit" value="Submit" />
            &nbsp;
            <input type="reset" name="Reset" id="Reset" value="Clear Form" />
          </p>
          </td>
        </tr>
      </table>
    </form>
谢谢。

Bob P。

4 个答案:

答案 0 :(得分:0)

你必须“取消引用”

$("#date-time2-1").attr("temp", 'myCount');

$("#date-time2-1").attr("temp", myCount);

因为你想要传递一个不是字符串的变量

并且更好地将db查询解析为Int like

var myCount = parseInt(numberfromDB);

然后你可以像真正的整数一样处理它,也可以不引用

> '49'

> 49

答案 1 :(得分:0)

代码几乎没有问题,我会仔细阅读:

$(document).ready(function () {
    var myCount = '50';   //will be pulled from a DB query

    //Right here, myCount shouldn't be quoted, or else your setting the attribute temp to "myCount"
    //$("#date-time2-1").attr("temp", 'myCount');
    $("#date-time2-1").attr("temp", myCount);

    //What is "this" referring to, the DOM ready statement? Simply compare the value like this: 
    //if ($("#date-time2-1").val($(this).attr("temp")) > 49) { //unquoted your number as well, since you're comparing numbers not strings

    //Or if you want to compare the temp value, use .attr("temp")
    if ($("#date-time2-1").val() > '49') {
        $("#date-time2-1").hide();
    } else {
        $("#date-time2-1").show();
    }
);

答案 2 :(得分:0)

您使用的是数字而不是字符串

而myCount是attr

中的一个变量
var myCount = 50;//get ride of the '

$("#date-time2-1").attr("temp", myCount);//get ride of the "

if ($("#date-time2-1").val($(this).attr("temp")) > 49) {//get ride of the '

答案 3 :(得分:0)

让我们开始让你的代码变得性感:

$(document).ready(function () {
  var myCount = '50';   //carefull with the quotes, if your not sure about the input you can always use intval()

$("#date-time2-1").attr("temp", myCount); // myCount has no quotes or else it wont work, because you dont want a string here
  if ($("#date-time2-1").val($(this).attr("temp")) > '49') { //Again same as above not a fan of the quotes
      $("#date-time2-1").hide();
  } else {
     $("#date-time2-1").show();
  }
}); //Close the document.ready