Question

我在他们的网站上有这个jQuery UI，我想为一个简单的大学计算应用程序重新制作它。我的计划是取出电子邮件，用户名等基本数据，并用3个主要下拉菜单替换它。 1，看看他们是否是州内或州外学生，两者都有不同的价值观。另一个下拉列表会询问他们是否留在大学，根据他们的输入它会更新成本，然后最后一个下拉菜单会询问他们将参加多少年。根据3个输入，它计算该大学的总成本。我需要的是发布下拉菜单的值而不是文本框。谢谢你的帮助！！所以我现在有这个：

式：

<style>
body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee;
padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>

jQuery脚本

<script>
$(function() {
var username = $( "#username" ),
  studenttut = $( "#studenttut" ),
  studenttut = $( "#campusrb" ),
  studenttut = $( "#yearsatten" ),
  allFields = $( [] ).add( username ).add( studenttut ).add( campusrb ).add( yearsatten ),
  tips = $( ".validateTips" );

function updateTips( t ) {
  tips
    .text( t )
    .addClass( "ui-state-highlight" );
  setTimeout(function() {
    tips.removeClass( "ui-state-highlight", 1500 );
  }, 500 );
}

function checkLength( o, n, min, max ) {
  if ( o.val().length > max || o.val().length < min ) {
    o.addClass( "ui-state-error" );
    updateTips( "Length of " + n + " must be between " +
      min + " and " + max + "." );
    return false;
  } else {
    return true;
  }
}

function checkRegexp( o, regexp, n ) {
  if ( !( regexp.test( o.val() ) ) ) {
    o.addClass( "ui-state-error" );
    updateTips( n );
    return false;
  } else {
    return true;
  }
}

$( "#dialog-form" ).dialog({
  autoOpen: false,
  height: 300,
  width: 350,
  modal: true,
  buttons: {
    "Create an account": function() {
      var bValid = true;
      allFields.removeClass( "ui-state-error" );

      bValid = bValid && checkLength( username, "username", 3, 16 );
      bValid = bValid && checkLength( studenttut, "studenttut", 1, 2 );
      bValid = bValid && checkLength( campusrb, "campusrb", 1, 2 );
      bValid = bValid && checkLength( yearsatten, "yearsatten", 1, 2 );       
      bValid = bValid && checkRegexp( username, /^[a-z]([0-9a-z_])+$/i, "Username may           consist of a-z, 0-9, underscores, begin with a letter." );
      bValid = bValid && checkRegexp( studenttut, /^[1-2]/, "Please select an option for the type of student you'll be." );
      bValid = bValid && checkRegexp( campusrb, /^[1-2]/, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
      bValid = bValid && checkRegexp( yearsatten, /^[1-8]/, "Username may consist of a-z, 0-9, underscores, begin with a letter." );

      if ( bValid ) {
        $( "#users tbody" ).append( "<tr>" +
          "<td>" + username.val() + "</td>" +
          "<td>" + studenttut.val() + "</td>" +
          "<td>" + campusrb.val() + "</td>" +
          "<td>" + yearsatten.val() + "</td>" +
        "</tr>" );
        $( this ).dialog( "close" );
      }
    },
    Cancel: function() {
      $( this ).dialog( "close" );
    }
  },
  close: function() {
    allFields.val( "" ).removeClass( "ui-state-error" );
  }
});

$( "#create-user" )
  .button()
  .click(function() {
    $( "#dialog-form" ).dialog( "open" );
  });
  });
  </script>

HTML

<body>

<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>

<form>
<fieldset>
<label for="username">username</label>
<input type="text" name="username" id="username" class="text ui-widget-content ui-    corner-all" />


<label for="studenttut">Are you a In-state/Out-of-state student?</label>
<select name="studenttut" id="studenttut" class="text ui-widget-content ui-corner-all"   />
    <option value="1">In-State-student</option>
    <option value="2">Out-of-State-student</option> 
</select>

<label for="campusrb">Are you staying on campus?</label>
    <select name="campusrb" id="campusrb" class="text ui-widget-content ui- corner-all" />
        <option value="" disabled="disabled" selected="selected">Please select an option</option>
        <option value="1">Yes</option>
        <option value="2">No</option> 
    </select>

<label for="yearsatten">How many years are you planning to attend??</label>
    <select name="yearsatten" id="yearsatten" class="text ui-widget-content ui-  corner-all" />
        <option value="" disabled="disabled" selected="selected">Please   select an option</option>     
        <option value="1">1 year</option> 
        <option value="2">2 years</option> 
        <option value="3">3 years</option>
        <option value="4">4 years</option>
        <option value="5">5 years</option>
        <option value="6">6 years</option>
        <option value="7">7 years</option>
        <option value="8">8 years</option>
    </select>
</fieldset>
  </form>
</div>



<div id="users-contain" class="ui-widget">
  <table id="users" class="ui-widget ui-widget-content">
    <thead>
      <tr class="ui-widget-header ">
        <th>Total Cost</th>
      </tr>
    </thead>
    <tbody>
      <tr>

      </tr>
    </tbody>
  </table>
</div>
<button id="create-user">Create new user</button>

</body>

Answer 1

你应该可以这样做：

$( "#users tbody" ).append( "<tr>" +
    "<td>" + username.val() + "</td>" +
    "<td>" + $('#studenttut>option:selected').text() + "</td>" +
    "<td>" + $('#campusrb>option:selected').text() + "</td>" +
    "<td>" + $('#yearsatten>option:selected').text() + "</td>" +
    "</tr>" );

需要jQuery UI Dialog来更新下拉列表值

1 个答案: