Question

我知道我不是唯一遇到此问题的人，但我找不到javascript解决方案了。

这是我的下拉选择。现在我想为每个选项显示一条特定的消息。

  public class Qz1 extends Activity {

        TextView a;
        TextView b;
        TextView c;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_qz1);
            a =(TextView)findViewById(R.id.roundOnea22);
            a.startAnimation(AnimationUtils.loadAnimation(Qz1.this, R.anim.anim_slide_in_left));
            b =(TextView)findViewById(R.id.roundOneb);
            b.startAnimation(AnimationUtils.loadAnimation(Qz1.this, R.anim.anim_slide_in_right));
            c =(TextView)findViewById(R.id.roundme);
            c.startAnimation(AnimationUtils.loadAnimation(Qz1.this, R.anim.anim_slide_in_left));




            Thread thread = new Thread(){

                @Override
                public void run() {
                    // TODO Auto-generated method stub
                    try{
                    sleep(3200);

                    startActivity(new Intent(getApplicationContext(), Qone.class));
                    } catch (InterruptedException e){
                        e.printStackTrace();
                    }
                }
        };
        thread.start();

    }

    public void round1(View v){
       Intent i = new Intent(Qz1.this, Qone.class);
       startActivity(i);
    }
}

这应该是每个选项的消息。

<select name="lehrberuf" id="lehrberuf" class="browser-default" required>
    <option value="" disabled selected class="grey-text">Lehrberuf</option>
    <option value="Anlagenfuehrer/-in EFZ">Anlagenführer/-in EFZ</option>
    <option value="Anlagen- und Apparatebauer/-in EFZ">Anlagen- und Apparatebauer/-in EFZ</option>
    <option value="Automatiker/-in EFZ">Automatiker/-in EFZ</option>
    <option value="Elektroinstallateur/-in EFZ">Elektroinstallateur/-in EFZ</option>
    <option value="Elektroplaner/-in EFZ">Elektroplaner/-in EFZ</option>
    <option value="Fachmann/-frau Betriebsunterhalt EFZ">Fachmann/-frau Betriebsunterhalt EFZ</option>
    <option value="Informatiker/-in EFZ">Informatiker/-in EFZ</option>
    <option value="Kauffrau / Kaufmann EFZ">Kauffrau / Kaufmann EFZ</option>
    <option value="Konstrukteur/-in EFZ">Konstrukteur/-in EFZ</option>
    <option value="Kunststofftechnologe/-technologin EFZ">Kunststofftechnologe/-technologin EFZ</option>
    <option value="Laborant/-in EFZ Fachrichtung Chemie">Laborant/-in EFZ Fachrichtung Chemie</option>
    <option value="Logistiker/-in EFZ Fachrichtung Lager">Logistiker/-in EFZ Fachrichtung Lager</option>
    <option value="Mediamatiker/-in EFZ">Mediamatiker/-in EFZ</option>
    <option value="Polymechaniker/-in EFZ">Polymechaniker/-in EFZ</option>
</select>

我需要一些JS的帮助。

提前谢谢。

Answer 1

尝试：

{{1}}

Answer 2

你可以使用

$(document).ready(function(){
    $('#lehrberuf').on('change',function(){
        var getIndex = $(this).find('>option:selected').index();
        $('.row > div').hide(); // you can use slideDown() or fadeOut() instead of .hide()
        $('.row > div').eq(getIndex).show(); // you can use slideUp() or fadeIn() instead of .hide()
    });
});

Working Demo

Answer 3

如果可以避免它，那么拥有如此多的div是可怕的编码习惯。想象一下，您需要更改布局或其他更改，您必须执行10次以上或更改10+类定义。

你的下拉只有一个选择，所以为什么不只有一个div，并替换内容？

你有html如：

<select onchange="showText(this)">
   <option value="my text">text</option>
<select>

<div id="dvContent">select an option!</div>

然后javascript：

<script>
  function showText(dd) {
     var sel = dd.options[dd.selectedIndex].value,
     dv = document.getElementById("dvContent");
     dv.innerHTML = sel.value;
  }
 </script>

请下次再去，你不会为其他人编写代码。学习的唯一方法就是犯错误。

这并没有使用 jQuery ，我个人认为最好正确学习然后使用 jQuery 以方便使用。但如果您愿意，可以使用 jQuery 将其最小化。

Answer 4

试试这个：

$('#lehrberuf').change(function() {

    var selected_index = $('#lehrberuf option:selected').index();
var text_in_div = $('#messages > div:eq('+selected_index+')').text();
alert(text_in_div);

});

如何根据下拉框选择显示/隐藏div

4 个答案: