如何使用jquery.ui.combify设置选择对象的宽度

时间:2018-06-14 18:03:25

标签: jquery

我需要使用jquery.ui.combify设置组合框的显示宽度。 搜索网络没有得到答案,我在jquery调用上尝试了各种css参数组合(例如.css(' width',' 200& #39;))但都失败了。 我的测试代码是:

<!DOCTYPE html>
<html><head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" type="text/css" media="all" />
  <link rel="stylesheet" type="text/css" href="includes/jquery.ui.combify.css" />
  <script src="includes/jquery-3.2.1.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <script type="text/javascript" src="includes/jquery.ui.combify.js"></script>
</head><body>
<?php
if (isset($_REQUEST['cmd']))
  {$cmd = $_REQUEST['cmd'];}
else
 {$cmd = '';}
$act = filter_input(INPUT_SERVER, 'PHP_SELF', FILTER_SANITIZE_URL);
switch ($cmd)
{
  case 'SUBMIT':
    debugbox("Selected value:  ",$_POST['MySelect']);
    $cmd="";
    echo "<form id='retry' name='retry' action=$act method='post'>";
    echo "<button type='submit' name='cmd' value=''>Go Again</button>";
    echo "<button type='submit' name='cmd' value='exit'>Quit</button>";
    echo "</form>";
    break;
  case 'exit':
    break;
  default:
    echo "<form id='selform' name='selform' action=$act method='post'>";
    echo "<select id='MySelect' name='MySelect' size='2' onchange='debug(this.value)'>";
    echo "<option>Some Option</option>";
    echo "<option>Some Other Option</option>";
    echo "<option>Yet another Option</option>";
    echo "</select>";
    echo "<button type='submit' name='cmd' value='SUBMIT'>SUBMIT-IT</button>";
    echo "</form>";
    break;
}
function debugbox($m1,$m2)
{
  echo "<script language=\"Javascript\">
    <!--
    var msg1 = '$m1';
    var msg2 = '$m2';
    var a = msg2.length;
    if (a > 0)
    {
      msg1 = msg1 + '\\n';
      msg1 = msg1 + msg2;
    }
    alert(msg1);
    // -->
    </script>";
}
?>
  <script type="text/javascript">
    $(document).ready(function(){
    $("select#MySelect").combify();
  });
  </script>
</body></html>

工作表单有几个组合元素,它们需要不同的大小。 感谢。

1 个答案:

答案 0 :(得分:0)

将前置CombifyInput-与您的MySelect ID合并,以便下面的代码可以解决问题。

<script type="text/javascript">
    $(document).ready(function(){
        $("#MySelect").combify();
        $('#CombifyInput-MySelect').css('width','300px');
    });
</script>