Javascript для скрытия элементов блока выбора, не работающих в IE

Question

Эй, не уверен, правильно ли я поступил. У меня есть два разных выбора в штучной упаковке. Что должно произойти, это когда выбран определенный элемент в блоке 1, определенные элементы в блоке 2 скрыты Что у меня отлично работает в FF но не в IE .... мысли?

<div>  
    <label class="form_label">Apparel</label>  
    <select id="Choices" size="1" style="clear: right;" onchange"changeThis();">  
        <option value="select">Pick Your Product</option>  
        <option value="1">choice 1</option>  
        <option value="2">choice 2/option>  
        <option value="3">choice 3</option>  
    </select>
</div>
<div>
    <label class="form_label">Size</label>
    <select id="Sizes" size="1" style="clear: right;">
        <option value="select">Choose Your Size</option>
        <option value="SC">Small Child</option>
        <option value="IC">Intermediate Child</option>
        <option value="MC">Medium Child</option>
    </select>
</div>

...

функция changeThing (выбор)

{
    var item = document.getElementById("Choices");
    var size = document.getElementById("Sizes");
    var selitem = item.options[item.selectedIndex].value;

    if(selitem == '2546')
    {
        for(i=0; i<2; i++)
        {
            size[i].style.display = 'none';
            //alert(size[i]);
        }
    }

Answer 1

Вы не можете отобразить: ни один удалить не удалит полностью, если вы хотите, чтобы пользователь не выбирал его, используйте отключено . Вы могли бы сделать что-то вроде этого

function changeThing()
{
var item = document.getElementById("Choices");
var size = document.getElementById("Sizes");
var selitem = item.options[item.selectedIndex].value;

if(selitem == '3')
{
    for(i=1; i<2; i++) // filter logic here
    {
        size[i].disabled = true; //false - to reset
        //alert(size[i]);
    }
}
size.selectedIndex = 0; // reset the selection so a disabled item may not be selected. }

Answer 2

У меня была такая же проблема несколько дней назад. IE не позволяет использовать visible: hidden или display: none для элемента option.

Вы можете решить эту проблему, сохраняя параметры select1 в переменной. Эта переменная будет иметь все возможные значения, поэтому, когда значение select1 было изменено, вы можете удалить все значения select2, а затем получить нужные параметры из переменной для помещения в select2.

Подведем итог:

1. Сохранить все возможные значения в переменной
2. Когда select1 был изменен, удалите все опции select2
3. Отфильтруйте нужные вам опции (получите эти значения из переменной шага 1) и поместите в select2

Answer 3

Попробуйте использовать это вместо:

http://www.w3schools.com/CSS/pr_class_visibility.asp

Это будет выглядеть как:

size[i].style.visibility='hidden';

РЕДАКТИРОВАТЬ

О, добро пожаловать в StackOverflow!

Answer 4

Вам нужно полностью удалить эту опцию, чтобы она работала в IE.

size.remove(i);

Таким образом, вам нужно сохранить параметры в массиве и загрузить их при необходимости.

Answer 5

Это зависит от того, как вы запускаете событие, вызывающее функцию changeThing (). Не уверен насчет IE9, но IE8 и обратно имеет проблемы с событием onChange. Это в основном избегает этого в IE. Вместо этого вам придется использовать onClick.

Если вы используете jQuery для запуска события, событие onchange должно работать корректно во всех браузерах (даже в IE). Не уверен, как это делают другие библиотеки Javascript.