HTML選擇下拉列表文本環繞在ajax更新後停止工作

我有一個html選擇下拉列表的地址。一些地址很長，延伸出父div邊界。HTML選擇下拉列表文本環繞在ajax更新後停止工作

我做功課，發現該CSS規則解決這個問題：

select, option { width: __; }

此下拉列表是一個Ajax啓用表單的一部分。用戶在其他區域中更改時，地址欄的選項將會更改。

現在我發現只要選項相同，css規則就可以正常工作。一旦我做了一些導致選擇選項被ajax改變，css規則就失去了控制權。選擇選項字段恢復到原始的一行表單，它突破了邊界。

我檢查了選項更改前後的html標記，以檢查select結構和id是否完好無損。發現元素結構相同，select元素id沒有變化。

那麼爲什麼css規則在選項更改時失去了它？

該行爲發生在IE，Firefox和Chrome上。

我正在使用Drupal 7，它是form，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%; 
}

來源

2013-02-14 Helen Sang

你能展示更多代碼嗎？使用jsfiddle也是一個好主意 – abbood 2013-02-14 04:40:46

的CSS規則將可能丟失，因爲選擇不是AJAX更新後有效。如果有多個具有相同名稱的元素，則Drupal中的表單元素ID將具有自動遞增的數字後綴。檢查標記並嘗試調整您的CSS規則。你甚至可以通過增加設置自己的類名，以這些元素：

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

而且粘貼代碼不包括#suffix財產與關閉，這可能導致其他的問題了。

來源

2013-04-10 09:43:27 Attila

HTML選擇下拉列表文本環繞在ajax更新後停止工作

回答

相關問題