标签: html-select

我有3个HTML组合/下拉框.他们都有一个独特的名称和身份.在特定事件中,我想获得所有这三个的价值.任何人都可以给我一个代码片段吗？

如何设置选项的样式？我想在下拉菜单中交替使用背景颜色.

我找到了这个问题的答案/sf/answers/507142191/,但在我的情况下我不能放一个隐藏的字段,所以有没有办法在PHP中发布一个禁用的选择字段？

我有一个<select>标签,用于ng-options绑定选项select.我的问题是如何添加ng-dbclick到每个选项select

这是我的代码

<select  size="4"  ng-model="pattern" ng-options="p.name  for p in patterns | filter:obj">

</select>

题:

我想删除没有特定CSS类的选择框中的选项.

技能等级

我还在学习jQuery,也许会做很长时间.

概要:

我有一个选择框:

<select id="MySelect">
    <option class="MyClass" value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
    <option class="MyClass" value="four">four</option>
    <option value="five">five</option>
    <option class="MyClass" value="six">six</option>
    <option value="seven">seven</option>
</select>

所以我希望删除这些选项2,3,5和7.

我可以计算所有选项:

alert('Options Count: ' + $('#MySelect option').length);

和班级的选项:

alert('Options with class: ' + $('.MyClass').length);
// I think this will search the entire file for elements with this class. Is this so?

但我不知道如何删除那些没有课程的人.我知道有一个非常简单的解决方案,但我无法想出一个简洁的方法来做到这一点.

谢谢你的帮助.

我希望select元素的默认选项值的宽度更短.当用户选择另一个选项时,select元素应调整自身大小,以便整个文本始终在元素中可见.

我已经在问题中找到了一个解决方案,根据选择的OPTION宽度自动调整SELECT元素的大小,但它不能用于bootstrap,我不知道为什么.

这是我的尝试:

$(document).ready(function() {
  $('select').change(function(){
    $("#width_tmp").html($('select option:selected').text());
    // 30 : the size of the down arrow of the select box 
    $(this).width($("#width_tmp").width()+30); 
  });
});

.btn-select {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ccc;
  padding:7px;
}
select {
  width: 60px;
}

#width_tmp{
  display : none;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="form-group">
  <div class="input-group">

    <span class="input-group-btn">
      <select class="btn btn-select align-left">
        <option>All</option>
        <option>Longer</option>
        <option>A very very long string...</option>
      </select>
      <span id="width_tmp"></span>
    </span>

    <input type="text" class="form-control" …

我想要一个下拉列表来更改我的网站显示的语言,所以我目前有:

<select ng-controller="langCtrl">
     <option ng-click="switchLanguage('en')" value="en">EN</option>
     <option ng-click="switchLanguage('de')" value="de">DE</option>
     <option ng-click="switchLanguage('it')" value="it">IT</option>
     <option ng-click="switchLanguage('fr')" value="fr">FR</option>
     <option ng-click="switchLanguage('es')" value="es">ES</option>
</select>

但是由于某些原因,这些ng-click似乎并没有调用指定的函数.我将它们全部更改为按钮,这似乎工作正常,但我想要一个下拉列表,而不是按钮.谁能告诉我为什么这不起作用？

控制器代码:

app.controller('langCtrl', function($translate, $location, $scope) {
$scope.switchLanguage = function (langKey) {
    switch(langKey) {
        case 'en':
            $location.url('/#en');
            break;
        case 'de':
            $location.url('/#de');
            break;
        case 'it':
            $location.url('/#it');
            break;
        case 'fr':
            $location.url('/#fr');
            break;
        case 'es':
            $location.url('/#es');
            break;
        default:
            $location.url('/#en');
    }
    $translate.use(langKey);
  };
});

我正在创建一个表单，用户可以在其中输入此人的信息。我想为给定人员创建电话号码和传真号码的下拉列表，用户可以选择他们想要的号码，即如果他们想要的号码已经存储在数据库中。但是，此人可能具有可能未存储在数据库中的其他电话号码。在这种情况下，我希望允许用户输入新号码。我发现一个很接近我想要在这里，但它不是我想什么比较。md-select如果可能的话，我希望使用angular-material来做。

<md-select ng-model="ctrl.phoneNumbers" ng-model-options="{ trackBy: '$value.id'}">
   <md-option ng-value="phoneNumber" 
              ng-repeat="phoneNumber in ctrl.phoneNumbers">{{ phoneNumber.number }}
   </md-option>
</md-select>

我正在尝试找出如何使用{{action}}帮助器根据select元素中的选择设置新的Ember Data Record的属性值。这是我的情况，简化了：

item.js路线。创建模板中可用的新记录。

model() {
  return this.store.createRecord('item');
}

new-item.hbs模板。选择元素触发操作以设置新项目的color属性。

<select {{action 'setColor' model value="target.value" on="change"}}>
  <option value="">choose</option>
  <option value="white">white</option>
  <option value="blue">blue</option>
  <option value="red">red</option>
  <option value="yellow">yellow</option>
</select>

item.js控制器。

actions: {
  setColor(item, option) {
    console.log(option);
    record.set('color', option);
    console.log(item);
  }
}

Console.log（option）不返回任何内容。record.set可以正常工作，我可以对选项进行硬编码，console.log（item）将显示新的item对象具有color属性设置。

另一方面，如果我只用

onChange={{action 'setColor' value="target.value"}} 

颜色将从操作中正确记录下来。但是，如果我像以前一样使用{{action ... on =“ change”}}语法在该动作调用中添加“模型”，console.log（option）返回未定义，而console.log（item）返回一个不带Event的事件。附加了模型对象。

问题是：我如何通过双方的target.value 和模型到的setColor行动？

我的下拉字段存在问题,该字段由大型查询动态填充.由于当用户访问表单时查询返回一个非常大的值,表单冻结.这就像是在等待下拉列表的填充.与此同时,所有表单格式都搞砸了,下拉列表消失了.当我将查询限制为较少数量的记录时,一切正常.此查询返回超过26K的记录.有没有解决方法来解决ColdFusion中的这个问题？我不相信ColdFusion无法处理这种情况.我正在使用ColdFusion2016和后端Oracle 11g.

这是查询和下拉列表:

    <cfquery name="xCodes" datasource="#application.DSN#">
     select xcode, desc, xcode || ' ---- ' || desc as FullDesc
     from x_header
     <cfif IsDefined("url.codes")>
        <cfif url.codes EQ "y">
         order by xcode
        <cfelse>
         order by desc
        </cfif>
     </cfif>
    </cfquery>

        <select name="xcode" id="xcode" class="RegSelect" required="TRUE">
          <option value="">--- Select a code ---</option>
             <cfoutput query="xCodes">
             <option value="#xcode#">#FullDesc#</option>
             </cfoutput>
        </select>