我正在尝试创建一个字符创建表单，并且我正在使用选择字段来获取只有很多可能性的某些信息但是当我运行脚本时，我的选项显示在对话框后面（选择元素放在其中）我创建了如何修复这个???
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Icebreaker Characters</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/trontastic/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
*
{
outline: none !important;
}
body
{
font-size: 62.5%;
}
label, input
{
display: block;
}
input.text
{
margin-bottom: 12px;
width: 95%;
padding: 0.4em;
}
fieldset
{
padding: 0px;
border: 0px;
margin-top: 25px;
}
h1
{
font-size: 1.2em;
margin: 0.6em 0px;
}
div#characters-contain
{
width: 350px;
margin: 20px 0px;
}
div#characters-contain table
{
margin: 1em 0px;
border-collapse: collapse;
width: 100%;
}
div#characters-contain table td, div#characters-contain table th
{
border: 1px solid #EEEEEE;
padding: 0.6em 10px;
text-align: left;
}
.ui-dialog .ui-state-error
{
padding: .3em;
}
.validateTips
{
border: 1px solid transparent; padding: 0.3em;
}
select
{
width: 200px;
}
.overflow
{
height: 200px;
position: absolute;
z-index: 1;
}
</style>
<script>
$(function()
{
$( "#hstyle" ).selectmenu()
.selectmenu()
.selectmenu( "menuWidget" )
.addClass( "overflow" );
});
$(function()
{
var dialog, form,
cname = $("#cname"),
fname = $("#fname"),
mname = $("#mname"),
lname = $("#lname"),
eye = $("#eye"),
hcol = $("#hcol"),
allFields = $( [] ).add( cname ).add( fname ).add( mname ).add( lname ),
tips = $( ".validateTips" ),
mini = 1,
maxi = 20,
regex = /^[a-z]([0-9a-z_\-\s])+$/i,
errregex = " can only contaion Username may consist of a-z, 0-9, underscores, hyphens, spaces and must begin with a letter."
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;
}
}
function addCharacter()
{
var valid = true;
valid = valid && checkLength( cname, "Codename", mini, maxi );
valid = valid && checkLength( fname, "First name", mini, maxi );
valid = valid && checkLength( mname, "Middle name", mini, maxi);
valid = valid && checkLength( lname, "Last name", mini, maxi);
valid = valid && checkRegexp( cname, regex, "Codename " + errregex);
valid = valid && checkRegexp( fname, regex, "First name " + errregex);
valid = valid && checkRegexp( mname, regex, "Middle name " + errregex);
valid = valid && checkRegexp( lname, regex, "Last name " + errregex);
if ( valid )
{
$( "#characters tbody" ).append( "<tr>" +
"<td>" + cname.val() + "</td>" +
"<td>" + fname.val() + "</td>" +
"<td>" + mname.val() + "</td>" +
"<td>" + lname.val() + "</td>" +
"<td style=\"background: " + eye.val() + "\"></td>" +
"<td style=\"background: " + hcol.val() + "\"></td>" +
"</tr>" );
dialog.dialog( "close" );
}
return valid;
}
dialog = $( "#dialog-form").dialog(
{
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons:
{
"Create a Character": addCharacter,
Reset: function()
{
form[ 0 ].reset();
},
Cancel: function()
{
dialog.dialog( "close" );
}
},
close: function()
{
form[ 0 ].reset();
allFields.removeClass( "ui-state-error" );
}
});
form = dialog.find( "form" ).on( "submit", function( event )
{
event.preventDefault();
addCharacter();
});
$( "#Create-character" ).button().on("click", function()
{
dialog.dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog-form" title="Create Character">
<p class="validateTips">All Form Fields are required.</p>
<form>
<fieldset>
<label for="cname">Code Name: </label>
<input type="text" name="cname" id="cname" class="text ui-widget-content ui-corner-all">
<label for="fname">First Name: </label>
<input type="text" name="fname" id="fname" class="text ui-widget-content ui-corner-all">
<label for="mname">Middle Name: </label>
<input type="text" name="mname" id="mname" class="text ui-widget-content ui-corner-all">
<label for="lname">Last Name: </label>
<input type="text" name="lname" id="lname" class="text ui-widget-content ui-corner-all">
<label for="eye">Eye Color: </label>
<input type="color" name="eye" id="eye" class="text ui-widget-content ui-corner-all">
<label for="hcol">Hair Color: </label>
<input type="color" name="hcol" id="hcol" class="text ui-widget-content ui-corner-all">
<fieldset>
<label for="hstyle">Hair Style: </label>
<select name="hstyle" id="hstyle">
<option>Straight</option>
<option>Curly</option>
</select>
</fieldset>
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px;">
</fieldset>
</form>
</div>
<div id="characters-contain" class="ui-widget">
<h1>Existing Characters:</h1>
<table id="characters" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header">
<th>
Code Name
</th>
<th>
First Name
</th>
<th>
Middle Name
</th>
<th>
Last Name
</th>
<th>
Eye Color
</th>
<th>
Hair Color
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<button id="Create-character">Create New Character</button>
</body>
</html>
答案 0 :(得分：2)