Наличие нескольких вариантов выбора, которые меняются каждый раз, html и javascript

Question

Наличие нескольких вариантов выбора, которые меняются каждый раз, html и javascript

0

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

       <html>
         <head>

        <TITLE>Environment Reference</title>
    </head>
    <body >
<center><font color="blue" size="22"><b>Environment Reference</b></font></center><hr>
         <!--options for different envirnoments-->
               <select name="envirnoment">
                              <option>develop</option>
                          <option>test</option>
                          <option>PROduce</option>

                 </select>
         <!--choosing the service for the envirnoment-->
           <select name="service" >
             <option>service</option>
              <option>HOST service</option>
           </select>

           <!--choosing the destnation domain-->
              <select name="domain">
             <option>1 </option>
             <option>2</option>
             <option>3</option>
            <option>4 </option>

           <!--creates the go button to proceed-->
              <form action="">
                <input type="button" value="GO">
                </form> 
                 </select>

user3120816 19 дек. 2013, в 23:28

Источник

2

Сделайте снимок javascript и покажите нам, как далеко вы продвинулись. По крайней мере, поместите в пустые функции javascript с комментариями, указывающими шаги, которые должны произойти.
Jacob Mattison 19 дек. 2013, в 22:00

Теги:

javascript

jquery

html

html5

2 ответа

Ещё вопросы

Сделайте снимок javascript и покажите нам, как далеко вы продвинулись. По крайней мере, поместите в пустые функции javascript с комментариями, указывающими шаги, которые должны произойти.

gibberish · Answer 1 · 2013-12-19T20-20-00.000Z

Что-то вроде этого поможет вам начать:

UPDATED jsFiddle Demo

Обратите внимание, что вы можете значительно уменьшить код с помощью массивов... Рекомендуется.

Код из jsFiddle:

$('select').change(function() {
    sel_el = $(this).attr('id');
    if (sel_el == 'env'){
        sel_opt = $(this).val();
        if (sel_opt == 'develop') {
            $svc.html(''); //Clear contents
            $svc.append('<option id="code">Write Code</option>');
            $svc.append('<option id="debug">Debug Code</option>');
            $svc.append('<option id="coffee">Drink Lotsa Coffee</option>');
        }else if (sel_opt == 'test'){
            $svc.html(''); //Clear contents
            $svc.append('<option id="testcode">Test Code</option>');
            $svc.append('<option id="hairpull">Pull out all remaining hair</option>');
            $svc.append('<option id="nailgun">Shoot programmer with nail gun</option>');
        }else if (sel_opt == 'PROduce'){
            $svc.html(''); //Clear contents
            $svc.append('<option id="tv">Produce for TV</option>');
            $svc.append('<option id="radio">Produce for Radio</option>');
            $svc.append('<option id="inet">Produce for Internet</option>');
        }
    }else if (sel_el == 'svc') {
        sel_opt = $(this).val();
        alert('You chose ' + sel_opt);
    }
});

Для окончательной оценки ($ dom = и т.д.) Вы определите, что выбрал пользователь, а затем перейдите на веб-сайт:

    }else if (sel_el == 'dom') {
        sel_opt = $(this).val();
        if (sel_opt = 'Microsoft') {
            window.location.href = "http://microsoft.com";
        }else if (sel_opt = 'Yahoo') {
            window.location.href = "http://yahoo.com";
        }
    }

Рекомендации:

http://developerdan77.wordpress.com/2011/10/14/dynamically-populate-a-select-element-from-json-data-with-jquery/

динамический выпадающий ящик?

teemo · Answer 2 · 2013-12-19T19-02-00.000Z

используйте jquery selector.val == xx then-> сделайте что-нибудь (например, отображение или изменение выбранного элемента на другом входе)