ドロップダウンリストを使用してコンテンツを表示/非表示

Question

ドロップダウンリストが選択オプション "2"である場合、画像ファイルのアップロードセクションを非表示にしようとしています。 例えば、ユーザが画像ファイルのアップロードを表示するはずのカテゴリ "Ponuda"としてユーザが選択されている場合、ユーザが画像ファイルのアップロードを隠しておく必要がある場合に選択します。

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を使用すると、提供されたHTMLから

<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

ベース、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(); 
    } 
    }); 
});