1

我有一个 html 选择地址的下拉列表。有些地址很长，超出了父 div 的边界。

我做了功课，发现css规则解决了这个问题：

select, option { width: __; }

此下拉列表是启用 ajax 的表单的一部分。当用户在其他时代发生变化时，地址字段的选项会发生变化。

现在我发现只要选项相同，css 规则就可以正常工作。一旦我做了一些导致选择选项被 ajax 更改的事情，css 规则就会失去它的控制权。选择选项字段恢复到原来的单行形式，突破了边界。

我检查了选项更改前后的 html 标记，以检查选择结构和 ID 是否完整。发现元素结构相同，select元素id没有变化。

那么，为什么CSS规则在更改选项时会丢失它？

该行为发生在 IE、Firefox 和 Chrome 中。

我正在使用 Drupal 7，它的形式是 ajax 框架。

更新：代码

我使用的是 Drupal 7，所以我实际上并没有编写 JS 代码。我只能在这里展示 PHP 和 CSS：

形式：

$form['shipping_address']['ship_to'] = array(
   '#type' => 'select',
   '#title' => 'Ship To',
   '#options' => $to_options,
   '#required' => true,
   '#default_value' => $selected, 
    '#ajax' => array(
      'callback' => 'ship_to_callback',
      'wrapper' => 'ship_to_address_replace',
    ),  
 );

  $ship_to_address_options = get_ship_to_address_options($selected);
  $form['shipping_address']['ship_to_address'] = array(
   '#type' => 'select',
   '#title' => $to_options[$selected],
   '#options' => $ship_to_address_options,
   '#prefix' => '<div id="ship_to_address_replace">',
   '#default_value' => isset($form_state['values']['ship_to_address']) ? $form_state['values']['ship_to_address'] : '',
   );

“ship_to”控制“ship_to_address”可用的选项。

CSS：

select#edit-ship-to-address, select#edit-bill-to-address {
  width: 60%;
}
4

1 回答 1

0

CSS 规则丢失可能是因为选择器在 AJAX 更新后无效。如果有多个具有相同名称的元素，则 Drupal 中的表单元素 ID 将具有自动递增的数字后缀。检查标记并尝试调整您的 CSS 规则。您甚至可以通过添加以下内容为这些元素设置自己的类名：

$form['shipping_address']['ship_to_address']['#attributes']['class'][] = 'my-own-class-to-target-with-css';

此外，粘贴的代码不包括#suffix带有 close 的属性，这也可能导致其他问题。

于 2013-04-10T09:43:27.707 回答