使用下拉列表显示/隐藏内容

Question

我正在尝试隐藏/显示图像文件上传部分，如果下拉列表是选择选项＆＃34; 2＆＃34;，如果用户选择选项＆＃34; 1＆＃34;它应该是显示图像上传选项。 因此，例如用户选择类别＆＃34; Ponuda＆＃34;它应该显示图像文件上传，如果用户选择potraznja它应该隐藏图像文件上传。

createpostview.php

<h2><?= $title;?></h2>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>

  </script>


<?php echo form_open_multipart('posts/create/');?>
<?php echo validation_errors();?>

    <div class="row">
        <div class="col-md-4 col-md-offset-4">

                <div class="form-group">
                    <label>Mjesto Polaska</label>
                    <input type="text" class="form-control" name="mjestoPolaska" placeholder="Mjesto Polaska">
                </div>


                <div class="form-group">
                    <label>Mjesto Odredista</label>
                    <input type="text" class="form-control" name="mjestoOdredista" placeholder="Mjesto Odredista">
                </div>

                <div class="form-group">
                    <label>Datum Polaska</label>
                     <input type="date" id="datepicker" min=<?php echo date('Y-m-d');?> class="form-control" name="datumPolaska" placeholder ="Datum Polaska" >
                </div>

                <div class="form-group">
                    <label>Datum Povratka</label>
                     <input type="date" id="datepicker1" min=<?php echo date('Y-m-d');?> class="form-control" name="datumPovratka" placeholder="Datum Povratka">
                </div>



                <div class="form-group">
                <label>Cijena</label>
                <input type="text" class="form-control" name="cijena" placeholder="Cijena">
                </div>

                <div class="form-group">
              <label for="select">Broj slobodnih mjesta</label>
                  <select class="form-control" id="select" name="brojMjesta">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                  </select>
                </div>


            <div class="form-group">
            <label for="kategorije">Kategorija</label>
             <?php 
             echo '<select class="form-control" id="kategorije" name="category_id">';
             foreach($categories as $category) :
                echo '<option value="' . $category['id'] . '">' . $category["name"] . '</option>';
             endforeach;
             echo '</select>';
             ?>
            </div>

            <div class="form-group">
             <label>Postavi sliku:</label>
             <input type="file" name="userfile" size="20">
             </div>

             <div class="form-group">
              <label>Opis:</label>
              <textarea class="form-control" rows="5" id="comment" name="opis"></textarea>
            </div>
                <button type="submit" class="btn btn-primary btn-block">Submit</button>

            </div>
    </div>

的JavaScript

<script>
                var element = document.getElementById("category_id");
                element.onchange = function(){
                var hiddenDiv = document.getElementById("showMe");
                hiddenDiv.style.display = (this.value=="")?"none":"block";}
            </script>

Answer 1

你应该尝试吹像

之类的东西

使用javascript / jquery

获取更改选择值

<div class="form-group" id="img_upload">
       <label>Postavi sliku:</label>
       <input type="file" name="userfile" size="20">
    </div>

    $('#kategorije').on('change', function(){
        var value = $(this).find(":selected").text();
        if (value == 1) {
         $("#img_upload").hide();
        } else {
           $("#img_upload").show();
        }
      });

Answer 2

根据您提供的HTML，写一个这样的JavaScript：

$(function(){
  $('#kategorije').on('change', function(){
    var selected = $(this).val();
    if (selected == 1) {
      // hide the parent element of input
      $('input[name=userfile]').parent().show();
    } else {
      // show the parent element of input
      $('input[name=userfile]').parent().hide();
    }
  });
});