Question

我有一个html选择下拉列表的地址。一些地址很长，延伸到父div边界之外。

我完成了我的作业并发现css规则解决了这个问题：

select, option { width: __; }

此下拉列表是启用ajax的表单的一部分。当用户在其他方面进行更改时，地址字段的选项将会改变。

现在我发现只要选项相同，css规则就可以正常工作。一旦我做了导致选择选项被ajax更改的东西，css规则就失去了它的控制权。选择选项字段还原为原始的一行形式，该形式突破边界。

我在选项更改之前和之后检查了html标记，以检查select结构和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%;
}

Answer 1

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

为这些元素设置自己的类名

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

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

HTML选择下拉列表文本包装在ajax更新后停止工作

1 个答案: